CSS ::marker Pseudo Element Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Styling bullets in the unordered list */
.custom-list li::marker {
  color: #ff5733;
  font-size: 1.5rem;
  content: "✦ "; /* Replaces the default dot with a star */
}

/* Styling numbers in the ordered list */
.custom-numbers li::marker {
  color: #2e86de;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}

/* General styling for layout */
li {
  padding-left: 10px;
  margin-bottom: 8px;
}</style></head><body><ul class="custom-list">
  <li>First item in the list</li>
  <li>Second item with more text</li>
  <li>Third item to show the style</li>
</ul>

<ol class="custom-numbers">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol></body></html>