List Styles and CSS Counters

What Is It?

List properties control markers. CSS counters can create custom visual numbering for structured content.

Properties, Tags and Attributes Explained

• list-style-type: Sets markers such as square, decimal, or lower-roman.
• list-style-position: Places the marker outside or inside the list item content box.
• list-style-image: Uses an image marker; keep a type fallback.
• counter-reset / counter-increment: Create and advance a named counter.
• counter(): Formats a counter value for generated content.
• content: Generates text, counter values, or decorative images for pseudo-elements. Keep essential information in the HTML.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: List marker choices

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Styles and CSS Counters</title>
  <style>
    ol { list-style-type: lower-roman; list-style-position: inside; padding: 0; }
    li { padding: 6px; background: #eff6ff; margin: 4px 0; }
  </style>
</head>
<body>
  <ol><li>Learn selectors</li><li>Practice layout</li><li>Build a page</li></ol>
</body>
</html>

What you see: The steps use roman numeral markers inside their boxes.

Example 2: Custom section counter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Styles and CSS Counters</title>
  <style>
    .steps { counter-reset: step; }
    h3 { counter-increment: step; }
    h3::before { content: "Step " counter(step) ": "; color: #1d4ed8; }
  </style>
</head>
<body>
  <section class="steps"><h3>Read</h3><p>Learn the definition.</p><h3>Try</h3><p>Edit the code.</p></section>
</body>
</html>

What you see: The generated headings are numbered Step 1 and Step 2.

Example 3: Use an image marker with a fallback

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Styles and CSS Counters</title>
  <style>
    ul { list-style-type: square; list-style-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27%3E%3Ccircle cx=%275%27 cy=%275%27 r=%274%27 fill=%27%232563eb%27/%3E%3C/svg%3E"); }
    li { padding: 6px; }
  </style>
</head>
<body>
  <ul><li>Read</li><li>Practice</li><li>Review</li></ul>
</body>
</html>

What you see: Small blue image markers appear beside list items. If the marker image cannot load, the square type is the fallback. Use marker images only for simple decoration.

When and Where to Use It

Use real ordered lists when order matters. Counters are useful as an extra visual aid for structured sections.

Common Mistake or Useful Tip

Generated counter text should not be the only source of essential meaning; the underlying headings and list structure must remain useful.

Try It Yourself

Change lower-roman to upper-alpha.