Styling the Squiggle: CSS Pseudo-Elements for Spelling and Grammar Errors
Delan Azabani, a Chrome engineer, has published a deep technical breakdown of the upcoming ::spelling-error and ::grammar-error CSS pseudo-elements. For decades, word processors have marked mistakes with colored squiggly lines, but on the web these indicators are rendered by browsers, which often lack the context to place or display them optimally. Authors may want to supply their own checker or improve the visibility of these markers, for instance by changing their color for better contrast.
The proposed feature set gives authors two distinct capabilities. First, new pseudo-elements allow styling of native error indicators. Second, new text-decoration-line values—spelling-error and grammar-error—let authors annotate their own text with decorations that resemble the browser’s native markers. This enables custom implementations while maintaining a familiar visual language for users.
What makes this post especially valuable is that Azabani is the developer implementing the feature in Chromium. His writing goes into considerable detail about the complexities involved, covering the intricate design decisions that browser engineers face—factors that web developers rarely see, despite being the end consumers of this work. It’s a rare glimpse into the engineering constraints and trade-offs that shape the web platform.
Azabani has since published a second part to the series. Both pieces reflect the speculative, early-stage nature of the work, acknowledging that the implementation is still far from finalized. The level of transparency offered here is a useful resource for anyone interested in how a broadly impactful frontend feature evolves from a proposed specification to actual browser behavior.
