CSS ::marker Pseudo-element

Selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Example: This example uses ::marker selector to style the bullet styles of a list.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>marker Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            text-align: center;
        }

        ul {
            width: 40px;
        }

        ul li::marker {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>Geeks For Geeks</h1>
    <h2>::marker element</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

</html>

Output:

CSS Pseudo Elements

CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.

Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax:

selector::pseudo-element {
     property: value;
}

There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:

Table of Content

::first-line Pseudo-element
::first-letter Pseudo-element
::before Pseudo-element
::after Pseudo-element
::marker Pseudo-element
::selection Pseudo-element

CSS ::marker Pseudo-element

CSS Pseudo Elements

Syntax:

Similar Reads

Contact Us