Share an interesting CSS3 pseudo-element::marker, which makes the list number more vivid

This article will introduce to you the interesting and interesting CSS3 pseudo-element ::marker. Using it can make our list numbers more interesting and vivid. If you are interested, come and take a look with me!

What is ::marker

CSS pseudo-element::marker is newly added starting from CSS Pseudo-Elements Level 3. A relatively new pseudo-element perfected in CSS Pseudo-Elements Level 4, it has been supported by browsers since Chrome 86. [Learning video sharing: css video tutorial]

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>

No special style is added by default. 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: '>';
}

Then we can transform the small dot into anything we want:

::marker pseudo-element Some limitations

First of all, the element that can respond to

::marker can only be a list item, for example, the li inside ul and the li inside ol are both list item.

Of course, this does not mean that there is no way if we want to use it on other elements. Except for

list item, we can set any display: list-item The elements use the ::marker pseudo-element.

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

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

::Exploring some applications of marker

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

Or, we can also use emoji expressions:

are all very suitable for display using

::marker. Note that is required when used on non-list-item elements. display: list-item：

<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>
<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>

CodePen Demo -- ::marker example

https://codepen.io/ Chokcoco/pen/eYvZmpW

::marker can change dynamically

Interestingly,

::marker can still change dynamically, take advantage of this , you can easily create some interesting hover effects.

For example, if you are not selected, you will not be happy, but if you are selected, you will be happy:

##CodePen Demo -- ::marker example

https://codepen.io/Chokcoco/pen/eYvZmpW

Used together with counter

It can be observed that, The

::marker

pseudo-element is very similar to the ::before and ::after pseudo-elements. They all have a content attribute. . In

content

, some simple string addition operations can actually be performed. Using this, we can cooperate with CSS counters counter-reset and counter-increment to implement the operation of adding a serial number 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 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3 id="Itaque-nbsp-sequi-nbsp-eaque-nbsp-earum-nbsp-laboriosam">Itaque sequi eaque earum laboriosam.</h3>
<p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
<h3 id="Laudantium-nbsp-sapiente-nbsp-commodi-nbsp-quidem-nbsp-excepturi">Laudantium sapiente commodi quidem excepturi!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

We use

::marker

and CSS counter counter-increment to implement an ordered list of automatic counting and h3 preceded by an emoji expression: The effect of <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>body { counter-reset: h3; } h3 { counter-increment: h3; display: list-item; } h3::marker { display: list-item; content: &quot;✔&quot; counter(h3) &quot; &quot;; color: lightsalmon; font-weight: bold; }</pre><div class="contentsignin">Copy after login</div></div> is as follows, which implements the effect of automatically adding a serial number to the ::marker<p> element: <code>

CodePen Demo -- ::marker example

https://codepen.io/chriscoyier/pen/ExNWmee

Finally

This article introduces what ::marker is and some of its practical scenarios. It can be seen that although ::before, ::after can also achieve similar functions, but CSS still provides a more semantic tag ::marker, which also shows that everyone needs to control their own front-end code (HTML/CSS) Pay more attention to semantics.

Okay, this article ends here, I hope it will be helpful to you :)

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Share an interesting CSS3 pseudo-element::marker, which makes the list number more vivid. For more information, please follow other related articles on the PHP Chinese website!