• Post category:CSS

How do we use CSS ::marker Selector | Explained

li::marker

In this article, we will discuss CSS marker selectors. It is used to select the marker box of a list item, which typically contains a bullet or number. Marker selector has mostly used li::marker and <summary> elements. It is one of the pseudo-class element selectors.

Syntax:

Element ::marker{
declaration list;
}

Example:
HTML:

<ul>
<li>APPLE</li>
<li>ORANGE</li>
<li>BANANA</li>
</ul>

CSS:

li::marker{
color: red;
}

Output:

li::marker

Here, we have <ul> tag inside it we have 3 <li>. Each <li> tag have some text inside. Then in CSS, we selected “li::marker” it selects all the <li> tags bullets and we set the color to red.

Leave a Reply