Skip to main content

CSS pseudo elements ::marker makes text numbers more interesting

· 3 min read

This article will introduce a more interesting pseudo element in CSS ::marker, using it, we can make our text serial number become more interesting!

What is ::marker​

::marker is a new pseudo-element from CSS pseudo-Elements Level 3. CSS pseudo-elements Level 4 is a relatively new pseudo-element, and is supported by browsers starting with Chrome 86+.

With it, we can add a pseudo-element to an element that generates a bullet or a 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. It looks something like this:

By using ::marker, we can transform the small dots in front of the serial number:

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

We can turn the dot into anything we want:

marker->

Some restrictions on ::marker​

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

Of course, it does not mean that we cannot use it on other elements except list item. We can use ::marker on any element with display: list-item set.

Second, not all style attributes can be used for styles within a pseudo-element. For now we can only use these:

all font properties -- So font properties are related

color -- color value

the content property -- Content content, similar to the content of the ::before, used to fill in ordinal content.

text-combine-upright unicode-bidi and direction properties -- Documentation is upright

exploration of ::marker​

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

image

Or we can use emoji:

emoji

Both are good for displaying with ::marker. Note that for non-list-item elements you need to use display:list-item;

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

::marker can change dynamically​

Interestingly, ::marker can change dynamically, and some interesting hover effects can be made simply by using this point.

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

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

marker-dynamically

The last​

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

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/what-is-css-marker

Buy me a coffee