Styling List Item Markers with the ::marker Pseudo-Element in CSS

::marker Pseudo-elements

The ::marker pseudo-element in CSS allows you to style the marker (bullet, number, or custom content) of a list item in an ordered (numbered) or unordered (bulleted) list. It provides the ability to customize the appearance of list item markers, making it useful for creating custom bullet styles or numbering formats. The ::marker pseudo-element can be applied to both <ul> (unordered list) and <ol> (ordered list) elements.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::marker Pseudo-elements</title>
    <style>
      body {
        padding: 30px;
      }
      ul li::marker {
        color: red;
        font-size: 23px;
      }

      .ordered-list li::marker {
        color: red;
        font-weight: bold;
      }
      .symbol li::marker {
        content: " ";
      }
      h3.list {
        display: list-item;
        counter-increment: myList;
      }
      h3.list::marker {
        display: list-item;
        content: "#" counter(myList) " ";
        color: lightsalmon;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h3>::marker</h3>

    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Pineapple</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ul>
    <ol class="ordered-list">
      <li>Apple</li>
      <li>Orange</li>
      <li>Pineapple</li>
      <li>Papaya</li>
      <li>Mango</li>
    </ol>

    <ol class="symbol">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Corporis aliquam excepturi neque deleniti.</li>
      <li>Incidunt eos repellendus vitae deserunt!</li>
    </ol>

    <hr />
    <h3 class="list">HTML</h3>
    <p>HyperText Markup Language</p>
    <h3 class="list">CSS</h3>
    <p>Cascading Style Sheet</p>
    <h3 class="list">SASS</h3>
    <p>Syntactically Awesome Style Sheets</p>
    <h3 class="list">TJ</h3>
    <p>Tutor Joes</p>
  </body>
</html>

Live Preview

he provided CSS code contains various rules related to the ::marker pseudo-element and the styling of list items, both in unordered lists (<ul>) and ordered lists (<ol>). Additionally, it includes rules for customizing markers on specific list items and using counters for ordered lists

This rule targets all list items (<li>) within unordered lists (<ul>).
It styles the markers (bullets) by setting their color to red and their font size to 23 pixels.
This rule targets list items (<li>) within ordered lists (<ol>) that have the class "ordered-list."
It styles the markers by making their color red and setting their font weight to bold.
This rule targets list items (<li>) with the class "symbol."
It removes the default marker content, effectively hiding the default markers for these list items.
The first rule (h3.list) targets <h3> elements with the class "list."
The second rule (h3.list::marker) targets the ::marker pseudo-element for the same <h3> elements with the class "list."

It's important to note that not all properties can be applied to the ::marker pseudo-element, as browser support for certain styles may vary. Always check browser compatibility when using ::marker to ensure your desired styles are rendered consistently across different browsers.