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 select markers of 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

CSS Online Test


« Previous Tutorial Next Tutorial »