list-style-position does not work when list-marker is pseudo-element. Why?

问题

I wanted to create colored list-markers for <ul> and I did it, but in all lists now the list-style-position attribute does not works.

Here is the code:

ul.FirmStyle {
  list-style-type: none;
}
ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  list-style-position: outside;
  /* !!!!!! */
  margin-left: 10px;
}

<ul class="FirmStyle">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

Why?

回答1:

As per W3C Specs, the list-style-position property controls the positioning of the marker pseudo element in the list item.

list-style-position

This property helps control the position of the ::marker pseudo-element in the list item.

Note: Note that a marker is only generated if the used value of the content property for the ::marker pseudo-element is not none.

This marker is generated only when the contents of it is none but once you set list-style-type to none the contents of the marker is defaulted to none. Since no marker is created there is nothing to position.

list-style-type

none

The list item’s marker’s default contents are none.

^{(emphasis is mine)}

You'd have to position the :before pseudo-element manually using the position attributes (or) by adjusting the left and right margins accordingly. The below snippet has samples on how to achieve it using margins or positioning (and also an output with list-style-position for comparison).

ul.FirmStyle{
  list-style-type: none;
}
ul.FirmStyle li:before{
  color: orange; 
  content: "▪";
}
ul.FirmStyle.with-margin li:before{
  margin: 0px 12px 0px -16px;
}
ul.FirmStyle.with-position li:before{
  position: relative;
  left: -16px;
}
ul.FirmStyle2{
  list-style-position: outside;
}

<ul class="FirmStyle with-margin">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle2">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle with-position">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

来源：https://stackoverflow.com/questions/34790393/list-style-position-does-not-work-when-list-marker-is-pseudo-element-why

标签

html

css

html-lists