Avoiding the Hover Bold Jiggle
Hovering a link and bolding it often nudges neighboring text. The culprit is simple: bold glyphs typically measure wider than their regular counterparts, so increasing font-weight on the fly alters the element’s footprint. In a tight row or grid, that extra width pushes other items around—sometimes causing awkward wrapping or visible reflow.
This is rarely an issue in vertical stacks, where a wider link has room to expand without affecting anything else. But in horizontal arrangements, the shift is hard to miss.
The Hidden Pseudo-Element Workaround
Ryan Mulligan shared a practical fix: attach a pseudo-element to each item carrying the same text string, but style it as if it were already bold. This ghost copy is visually hidden yet still occupies width. When the real link bolds on hover, it simply fills the space that was reserved all along—no layout change.
The approach works best when the layout itself doesn't already mask the shift. With a fixed grid of four equal columns and short labels, bolding rarely disturbs anything because each column’s width is predetermined. The problem emerges only when columns size themselves to their content—for instance, using automatic Grid columns that let items decide their own width.
In those dynamic arrangements, the hidden pseudo-element trick earns its keep, preventing the horizontal shuffle that would otherwise accompany a bold hover state.
