Let’s Use the Nonexistent ::nth-letter Selector Now
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A deep dive into implementing a JavaScript shim for the long-requested but nonexistent CSS `::nth-letter` pseudo-element selector. The author publishes an npm package that works by using regex to rewrite custom `::nth-letter` CSS syntax into valid `:nth-child` selectors, then uses GSAP's SplitText to wrap each character in a span. The post explores two approaches — a light DOM version and a shadow DOM version — weighing trade-offs around accessibility, DOM pollution, and browser compatibility. Limitations of both approaches are discussed honestly, along with reflections on why browsers have been reluctant to implement this feature natively.
Table of contents
Impossible demos of ::nth-letterWait, what? How do all those demos work?Why we’re not going to give up on ::nth-letterDefining our termsHow to write an impossible polyfillDo we have to modify the DOM for this?Shadow DOM version of ::nth-letterThe (actual) endingSort: