Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use CSS3 pseudo element:: marker". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use CSS3 pseudo element:: marker".

What is:: marker

CSS pseudo element:: marker is a relatively new pseudo element in CSS Pseudo-Elements Level 4, which has been added since CSS Pseudo-Elements Level 3, and has been supported by browsers since Chrome 86 +. [learning video sharing: css video tutorial]

With it, we can add a pseudo element to the element to generate a bullet or number.

Normally, we have the following structure:

Contagious Stages Pages Courageous Shaymus Faceless

No special styles are added by default, and the style looks something like this:

Using:: marker, we can modify the dot in front of the serial number:

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

We can transform the dots into whatever we want:

Some restrictions on pseudo elements of:: marker

First of all, be able to respond: the element of marker can only be a list item, for example, the li inside li,ol in ul is list item.

Of course, that's not to say that there's nothing we can do if we want to use it on other elements, except for list item, we can use:: marker pseudo-elements for any element that has display: list-item set.

Second, for styles within pseudo elements, not all style attributes can be used, which we can only use at this time:

All font properties-so font properties are relevant

Color-Color valu

The content property-- content content, similar to the content of:: before pseudo-element, used to fill in ordinal content

Text-combine-upright (en-US), unicode-bidi and direction properties-related to the direction of document writing

Exploration of some applications of marker

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

Or, we can use emoji emoticons:

All of them are very suitable for presentation using:: marker. Note that you need to use display: list-item for non-list-item elements:

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet

CodePen Demo -:: marker example

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

:: marker can be changed dynamically

What's interesting is that:: marker can be changed dynamically, and with this, you can simply create some interesting hover effects.

For example, if you are unhappy if you are not selected, choose the effect of being happy:

CodePen Demo -:: marker example

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

Use with counter

What you can observe is that the:: marker pseudo element is very similar to the:: before,:: after pseudo element, both of which have a content attribute.

In content, you can actually do some simple string addition operations. With this, we can work with CSS counters counter-reset and counter-increment to add sequence numbers to:: marker elements.

Those who don't know much about counter-increment can move here: MDN-- counter-increment.

Suppose we have the following HTML:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Itaque sequi eaque earum laboriosam.

Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?

Laudantium sapiente commodi quidem excepturi!

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

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

The effect is as follows, achieving an automatic effect of adding sequence numbers to:: marker elements:

Thank you for your reading, the above is the content of "how to use CSS3 pseudo element:: marker". After the study of this article, I believe you have a deeper understanding of how to use CSS3 pseudo element:: marker, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.