The Pseudo-Elements Everyone Forgets: ::marker and ::selection

Two tiny pseudo-elements sit in the "I keep forgetting these exist" drawer, and both replace habits that involve way more code than necessary.

::marker - style bullets without destroying the list

The traditional way to get brand-colored bullets was scorched earth: list-style: none, then rebuild the bullet as a ::before with absolute positioning and hanging-indent padding. Meanwhile:

li::marker {
    color: #7c3aed;         /* purple bullets, real list intact */
}

ol li::marker {
    font-weight: 700;
    color: #7c3aed;         /* numbers too - ::marker styles those as well */
}

You keep semantic lists, native numbering, correct wrapping indent and screen-reader behavior. ::marker accepts a limited property set - color, font-* properties, content, white-space, and animation/transition of those - which covers the actual design need 95% of the time.

The content property inside ::marker opens the fun door:

.checklist li::marker  { content: '✓  '; color: seagreen; }
.warnings  li::marker  { content: '⚠ '; }
li::marker             { content: counter(list-item) ' → '; }

That last one uses the built-in list-item counter every list carries - custom number formatting without touching the full counter machinery.

When you need full layout control over the marker box (backgrounds, borders, exact positioning), that's the moment for the ::before rebuild. Start with ::marker; escalate only when the design forces you.

::selection - the highlight color is part of your brand too

Select text on a default site and you get that OS blue that matches nothing in your palette:

::selection {
    background: #4f46e5;
    color: #fff;
}

/* Scope it, like anything else */
.code-block::selection,
.code-block *::selection {
    background: #fbbf24;
    color: #1e1b16;
}

Allowed properties are strictly limited: color, background-color, text-decoration, text-shadow and a couple of others. No fonts, no spacing - selection can't change layout, by design.

Two practical rules: keep contrast high (people select text to read it - a subtle tinted background that makes selected text vanish is a genuine usability bug), and mind dark mode - a hardcoded light-mode selection color inside a dark theme looks broken, so use your custom properties here like everywhere else.

Both pseudo-elements have been universally supported for years (::marker since 2020-2021, ::selection since roughly forever). Total adoption cost: minutes. They're the kind of finishing details users never name but always feel.