Bold on Hover... Without the Layout Shift

Changing font weight, particularly to bold, often triggers layout shifts. This is because bold text usually occupies more horizontal space. While inconsequential in some layouts (e.g., vertically stacked links), it can be problematic in others, such as horizontal rows where elements might shift.

Ryan Mulligan highlights this issue and offers an elegant solution:

Hovering to bold text causes noticeable layout shifts, especially with wrapping elements. A clever workaround: a hidden pseudo-element mirroring the text, pre-bolded to reserve the necessary space.

See it in action: https://www.php.cn/link/e44956a0a9118d2bfe39f3483f57db37 pic.twitter.com/kdZBTLQ0RD

— Ryan Mulligan (@hexagoncircle) July 20, 2020

Mulligan's approach is ingenious. Each list item includes a hidden pseudo-element containing an identical text string, pre-styled as bold. This invisible element reserves the required width, preventing layout shifts when the actual link text is bolded on hover.

The effectiveness of this technique also hinges on the layout method. Forcing a fixed number of columns with CSS Grid, especially with text that doesn't exceed column width, eliminates the shifting issue. However, allowing automatic column wrapping will likely reintroduce the problem.

The above is the detailed content of Bold on Hover... Without the Layout Shift. For more information, please follow other related articles on the PHP Chinese website!