In this article, we will introduce an interesting pseudo element in CSS ::marker. We can use it to make our text number more interesting!

What is: : marker

CSS Pseudo Elements :: Marker is a relatively new Pseudo element that was added from CSS Pseudo Elements Level 3 and improved from CSS Pseudo Elements Level 4, and has been supported by browsers since Chrome 86+.

Using it, we can add a pseudo-element to the element 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>
Copy the code

By default, no special styles are added. It looks 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: '>';
}
Copy the code

We can transform the dots into anything we want:

:: Some limitations of marker pseudo-elements

Firstly, the element that can respond to ::marker can only be a list item, for example, li inside ul and Li inside OL are both list items.

Of course, it does not mean that we have no way to use it on other elements if we want. Except for list item, we can use ::marker pseudo-element on any element with display: list-item set.

Second, for styles within pseudo-elements, not all style attributes can be used, so for now we can only use these:

  • All Font properties — so the font properties are related
  • Color — Color value
  • the content property— content — content::beforeThe content of the pseudo-element, used to fill in the numbered content
  • Text -combine- Upright (EN-us), Unicode – Bidi and direction properties — Document writing direction

Some application exploration of :: Marker

For example, we often see some decorations before the title:

Or, we can use emojis:

Are perfectly suitable for display by ::marker. Note that if you use 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>
Copy the code
h1 {
  display: list-item;
  padding-left: 8px;
}
h1::marker {
  content: '▍;
}
h1:nth-child(2)::marker {
  content: '😅';
}
Copy the code

CodePen Demo — ::marker example

:: Marker can be dynamically changed

Interestingly, :: Marker can still dynamically change, use this point, you can easily make some interesting hover effects.

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

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

CodePen Demo — ::marker example

Use with counter

It can be observed that :: Marker pseudo-elements are very similar to ::before and ::after pseudo-elements in that they both have a content attribute.

In Content, you can actually do some simple string addition. Using this, we can use the COUNTER counter counter counter reset and counter-increment to add the ::marker operation.

MDN — Increment 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>
Copy the code

We use ::marker and CSS counter counter-increment to achieve an automatic count and h3 with an ordered list of emojis:

body {
  counter-reset: h3;
}

h3 {
  counter-increment: h3;
  display: list-item;
}

h3::marker {
  display: list-item;
  content: "✔" counter(h3) "";
  color: lightsalmon;
  font-weight: bold;
}
Copy the code

The effect is as follows, which realizes an effect of automatically adding serial number to :: Marker element:

CodePen Demo — ::marker example

The last

This paper introduces what is ::marker 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 labels ::marker. It also shows that people need to pay more attention to the semantics of their front-end code (HTML/CSS).

Ok, this article is over, hope to help you 🙂

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

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

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