In this article, we’ll introduce an interesting pseudo element in CSS ::marker. With it, we can make our text numbers more interesting!

What is: : marker

CSS pseudo-elements ::marker is a new addition to CSS pseudo-elements Level 3. It is a fairly recent addition to CSS pseudo-elements Level 4 and has been supported by browsers since Chrome 86+.

Using this, we can add a pseudo-element to the element, which can be used to generate a bullet or number.

Normally, we have the following structure:

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

The default does not add any special styles, which look something like this:

Using ::marker, we can transform the small dot in front of the serial number:

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}

We can transform the dot into anything we want:

Some Restrictions on :: Marker Pseudo Elements

First of all, the element that can respond to ::marker can only be a list item, such as Li inside UL, Li inside OL are all list items.

Of course, that’s not to say that we can’t use it on other elements if we want to, except for List item. We can use ::marker pseudo-elements on any element where display: list-item is set.

Second, for styles within pseudo elements, not any style attributes can be used. For now, we can only use these:

  • All Font Properties — So font properties are relevant
  • Color — color value
  • the content property— content, like::beforeThe content of the pseudo-element, which is used to fill the ordinal content
  • Text – Combine – Upright (EN-US), Unicode – Bibi and Upright Properties

Exploration of some applications of ::marker

For example, we often see some decorations in front of the title:

Or, we could use emoji:

Both are perfectly suited to the use of ::marker. Note that on non-list-item elements you need to use display: list-item:

<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>
h1 { display: list-item; padding-left: 8px; } h1::marker {content: '; } h1:nth-child(2)::marker {content: '😅'; }

CodePen Demo — ::marker example

:: Marker can change dynamically

Interestingly, ::marker can be dynamic change, using this, you can simply make some interesting hover effect.

For example, the effect of being unhappy not being selected and happy being selected:

li { color: #000; transition: .2s all; } li:hover { color: #ff6000; } li::marker {content: '😩'; } li:hover::marker {content: '😁'; }

CodePen Demo — ::marker example

Use it with counter

It can be observed that ::marker pseudo elements are very similar to ::before and ::after pseudo elements, both of which have a content attribute.

In content, you can actually do some simple string addition. Using this, we can add numbers to ::marker elements with CSS counters Counter-Reset and Counter-increment.

right
counter-incrementIf you don’t know much about it, you can go here:
MDN — counter-increment

Suppose we have the following HTML:

<h3>Lorem ipsum dolor sit amet.</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <h3>Itaque sequi eaque earum laboriosam.</h3> <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto? </p> <h3>Laudantium sapiente commodi quidem excepturi! </h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

We use ::marker and CSS counter-increment to implement an automatically counted, ordered list with an emoji in front of h3:

body { counter-reset: h3; } h3 { counter-increment: h3; display: list-item; } h3::marker { display: list-item; Content: "bookmark" counter(h3) "; color: lightsalmon; font-weight: bold; }

The effect is as follows. An effect of automatically adding sequence number to ::marker elements is realized:

CodePen Demo — ::marker example

The last

This paper introduces what ::marker is and some of its practical scenarios. It can be seen that although ::before and ::after can also achieve similar functions, CSS still provides more semantic tags ::marker, It also shows that you need to pay more attention to the semantics of your front-end code (HTML/CSS).

Well, that’s the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public number – ICSS front end stories 😄

More exciting CSS technical articles in my GitHub — ICSS, keep updating, welcome to click star to subscribe to the favorites.

If there are any questions or suggestions, you can communicate more, the original article, the writing is limited, the talent is shallow, if there is something wrong in the article, wang told.