CSS pseudo-element::marker detailed explanation

This article will introduce an interesting pseudo-element in CSS ::marker . Using it, we can make our text numbers more interesting!

What is ::marker

CSS pseudo-element ::marker is a relatively new pseudo-element added in CSS Pseudo-Elements Level 3 and improved in CSS Pseudo-Elements Level 4. It is supported by browsers starting from Chrome 86+.

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

By default, no special styles are added, and its style is roughly 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 small dots into anything we want:

Some limitations of the ::marker pseudo-element

First of all, the only element that can respond to ::marker is a list item. For example, li inside ul and li inside ol are both list items.

Of course, it doesn’t mean that there is no way to use it on other elements. In addition to list items, we can use ::marker pseudo-element on any element that has display: list-item set.

Secondly, not all style attributes can be used for the styles within pseudo-elements. Currently we can only use these:

• all font properties -- all font properties related
• color -- color value
• the content property -- content content, similar to the content of the ::before pseudo-element, used to fill in the serial number content
• text-combine-upright (en-US), unicode-bidi and direction properties -- Document writing direction related

::marker application exploration

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

Alternatively, we can use emoji expressions:

Both are very suitable for display using ::marker . Note that display: list-item should be used on non- list-item elements:

<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 still change dynamically, and using this, you can easily create some interesting hover effects.

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

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

CodePen Demo -- ::marker example

Use with counter

It can be observed that ::marker pseudo-element is very similar to ::before and ::after pseudo-elements, in that they all have a content attribute.

In content , some simple string addition operations can actually be performed. Using this, we can use the CSS counters counter-reset and counter-increment to add serial numbers to the ::marker element.

If you don't know much about counter-increment 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>It is very hard to grow a baby.</h3>
<p>Does it seem fair to say that there is no such thing as a voluptatibus, a debtor?</p>
<h3>I am so happy!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

We use ::marker and CSS counter counter-increment to implement an ordered list with automatic counting and an emoji expression in front of h3 :

body {
  counter-reset: h3;
}

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

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

The effect is as follows, which realizes the effect of automatically adding serial numbers to ::marker elements:

CodePen Demo -- ::marker example

at last

This article 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 a more semantic tag ::marker , which also shows that everyone needs to pay more attention to the semantics of their front-end code (HTML/CSS).

Well, this article ends here, I hope it helps you😃

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

If you have any questions or suggestions, please feel free to communicate with me. This is an original article, and my writing skills are limited. If there is anything wrong in the article, please let me know.

This is the end of this article about CSS ::marker to make text numbers more interesting. For more relevant CSS ::marker content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!