Mode

Presets

List Style Options

Styling

List Items

Save/Load

Preview

  • First item
    • ○Nested item A
    • ○Nested item B
  • Second item
    • ○Nested item A
    • ○Nested item B
  • Third item
  • Fourth item

Generated CSS

/* Standard list style */
ul.custom-list,
ol.custom-list {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 24px;
}

ul.custom-list li,
ol.custom-list li {
  margin-bottom: 12px;
}

/* Marker styling (::marker) */
ul.custom-list li::marker,
ol.custom-list li::marker {
  color: #3b82f6;
  font-size: 16px;
  font-weight: 600;
}

/* Nested list styling */
ul.custom-list ul,
ul.custom-list ol,
ol.custom-list ul,
ol.custom-list ol {
  margin-top: 12px;
  padding-left: 24px;
}

HTML Structure

<ul class="custom-list">
  <li>First item</li>
  <li>Second item
  <ul>
    <li>Nested item A</li>
    <li>Nested item B
    <ul>
      <li>Deep nested</li>
    </ul>
    </li>
  </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>

CSS Counters Reference

Counter Properties

  • counter-reset - Create or reset a counter
  • counter-increment - Increment counter value
  • counter() - Display counter value
  • counters() - Display nested counter values

List Style Types

  • disc - Filled circle (default)
  • circle - Empty circle
  • square - Filled square
  • decimal - Numbers (1, 2, 3)
  • lower-alpha - Letters (a, b, c)
  • lower-roman - Roman (i, ii, iii)

::marker Pseudo-element

  • Style list markers directly
  • Supports: color, font properties, content
  • Limited support in older browsers
  • Alternative: Use ::before with custom content

Common Patterns

  • Legal: 1.1, 1.2, 1.2.1
  • Academic: I.A.1.a
  • Parenthetical: (a), (b), (c)
  • Bracketed: [1], [2], [3]

Rate this tool