Bald In The Land Of Big Hair

What This Actually Is

It's a CSS counter-style trick that lets you render custom glyphs for list markers, and someone took it in a weird direction with emojis. The name comes from a specific demo that uses a custom counter to swap normal bullet points into a sequence of emojis — in this case, hair-related ones surrounding a bald center. You see it pop up occasionally in code pen experiments and niche frontend blogs. I ran into this when a client wanted animated emoji sequences as decorative list markers on a product page. Standard list-style-image doesn't animate. The counter approach does, because you're just changing the content of a pseudo-element.

Bald In The Land Of Big Hair

The technique relies on three things: the @counter-style at-rule, a counter reset on your container, and a ::before or ::after pseudo-element on each list item pulling that counter value. The actual "bald" part is just the visual result — a scalp emoji in the middle with hair emojis around it, created purely through CSS content property swaps. Here's the skeleton: @counter-style hair-cycle { system: cyclic; symbols: ‍ ‍ ; suffix: " "; }

Then on your list items, you set counter-reset on the parent and counter(hair-cycle) in the pseudo-element. That's it. The browser handles the cycling automatically. I hit a real edge case once where Safari on iOS would render the counter symbols inconsistently depending on the font stack. Some systems would fall back to a box or blank square for certain emojis in counter style. The workaround was wrapping each symbol in a <span> with an explicit font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif and using white-space: nowrap on the pseudo-element. It's ugly but functional. There are limitations worth knowing before you commit to this. Emoji support in @counter-style is not uniform across browsers. Firefox historically had the most trouble with non-standard symbol sets. If you need to support older browsers, this approach breaks entirely and you'd be better off using actual <img> tags or SVG sprites with a simple class toggle. Also, accessibility is poor — screen readers will announce the emoji names aloud for every list item, which gets repetitive fast. You'll want to add aria-hidden="true" to the pseudo-elements or hide them visually with speak: none if you're going this route.

The main pitfall beginners miss is forgetting that @counter-style only cycles through the symbols you provide. If your list has more items than symbols, it loops. That's usually fine for decoration but disastrous if you're using it for something that needs sequential numbering. Keep the symbol set small and purposeful. I don't have a single download link because this isn't a library or a plugin. It's a technique. The closest thing to a reference implementation is on CodePen — search for "CSS counter style emoji" and you'll find several working examples. One solid starting point is the MDN documentation on @counter-style, which covers the syntax thoroughly even if it doesn't mention the emoji use case. The real question is whether you actually need this. If you're just decorating a page, a simple background image or SVG icon does the job with zero maintenance. The counter approach shines when you need the icons to change based on state — like showing different emojis for different list categories, or animating them on hover. In those cases, the technique saves you from writing JavaScript to manipulate classes.

I've used it in production for a recipe site where each ingredient list item showed a different food emoji based on the category. The counter style handled the mapping cleanly without any JS overhead. The tradeoff was extra CSS complexity and the Safari quirk I mentioned. Worth it for that project, probably not for something simpler.