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

Question

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?

Answer 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>

Answer 2

Bite late, but I just had the same problem!

Do the following to your pseudo element:

ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  margin-left: -25px;  /* this is to move the icon left */
  padding-right: 10px; /* to keep some space between icon and text */
}

you dont need the list-style-position: outside;