Home > Article > Web Front-end > 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!
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 limitationsFirst 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.
list item, we can set any display: list-item The elements use the
::marker pseudo-element.
The content of the pseudo element is used to fill in the serial number content
::marker. Note that
is required when used on non-list-item
elements. display: list-item:
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
CodePen Demo -- ::marker examplehttps://codepen.io/ Chokcoco/pen/eYvZmpW::marker can change dynamicallyInterestingly,
::marker can still change dynamically, take advantage of this , you can easily create some interesting hover effects.
https://codepen.io/Chokcoco/pen/eYvZmpW
Used together with counter
pseudo-element is very similar to the ::before
and ::after
pseudo-elements. They all have a content
attribute. . In
, 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
, 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 counter-increment
to implement an ordered list of automatic counting and h3
preceded by an emoji expression: The effect of <pre class="brush:css;toolbar:false;">body {
counter-reset: h3;
}
h3 {
counter-increment: h3;
display: list-item;
}
h3::marker {
display: list-item;
content: "✔" counter(h3) " ";
color: lightsalmon;
font-weight: bold;
}</pre>
is as follows, which implements the effect of automatically adding a serial number to the
element:
CodePen Demo -- ::marker example
https://codepen.io/chriscoyier/pen/ExNWmee
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!