::marker

The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a list-item, whether that is a (<li>) in an ordered (<ol>) or unordered (<ul>) list, or an element that declares its display property as a list-item.

Please note that that no browser supports the use of ::marker at the time of this writing.

li::marker {
  content: "#" counter(counter) ":";
}

The most handy benefit of ::marker is that it eliminates the need for the :before selector when putting CSS counter properties to use. For example, the markup for custom list numbering currently looks like this:

.element {
  counter-reset: my-awesome-counter;
}

.element:before {
  content: counter(my-custom-counter);
  counter-increment: my-custom-counter;
}

We will be able to achieve the same numbering system using ::marker instead:

.element {
  counter-reset: my-awesome-counter;
}

.element::marker {
  content: counter(my-custom-counter);
  counter-increment: my-custom-counter;
}

This not only frees up :before for other styling, but it is also makes sense to able to semantically target the default styling created by a list-item independent of a nondescript selector.

Notice how this could be extremely helpful for interspersing notes in the flow of paragraphs, as provided by the W3C spec:

p.note {
  display: list-item;
  counter-increment: note-counter;
  color: red;
  margin-left: 5em;
}

p.note::marker {
  content: "Note " counter(note-counter) ":";
  text-align: left;
}
<p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way--in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
<p class="note">Holy smokes, that's an epic intro!</p>
<p>There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p>
<p class="note">Those sound like lovely rulers.</p>

The result might end up looking something like this:

Related

More Information

Browser Support

None at the time of this writing.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag