CSS ::marker | Style All List Markers

The CSS ::marker pseudo-element is used when we need to change the default style of list markers in a web page. The ::marker selects markers for both organized and unorganized list items. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      ::marker {color: brown; font-weight: bold; font-size: 26px;}
   </style>
</head>
<body>

   <p>List of famous programming languages:</p>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C</li>
      <li>C++</li>
   </ul>

   <p>The three famous and most used web developing languages are:</p>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>

</body>
</html>
Output

List of famous programming languages:

  • Java
  • Python
  • C
  • C++

The three famous and most used web developing languages are:

  1. HTML
  2. CSS
  3. JavaScript

The CSS code in the head section of the document is setting a style rule for the ::marker pseudo-element, which is used to style the marker (bullet or number) of list items. In this case, the marker color is set to brown, the font weight is set to bold, and the font size is set to 26 pixels.

When this code is rendered in a web browser, the list items in both the unordered and ordered lists will have markers styled according to the ::marker rule in the CSS code. This means that all bullet points for the first list and all numbers for the second list will have the specified color, font weight, and font size.

CSS ::marker syntax

The syntax of the "::marker" pseudo-element in CSS is as follows:

selector::marker {
   // CSS styles
}

The selector is the element that contains the list item(s) you want to style.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!