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?

Elephus

Because it's not a list item bullet ...it's a different element entirely. Why should it act the same? – Bricker

The easiest way to color your list-style-item is to color your entire UL and wrap your content inside another tag with the regular color. – Askins

Do you mean that item-bullet, if it's "none" is not invisible, it is not exists? And it means that my pseudo-marker is a simple text. – Elephus

Yep, that's it precisely. See Harry's answer. – Bricker

somethinghere, I know that way, but I think it is not good, because i will be musted to place <span> each time :( – Elephus

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>

Daugherty

Thanks a lot. Is that approach is safe, if i want to change the font size? – Elephus

@YesMan: You're welcome. The approach is reasonably safe but if you want it to behave like list-style-position when font-size changes then it would be better to use em or rem for the margins (like margin: 0px 0.75em 0px -1em;). – Daugherty

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;

Proletariat