00:00
00:00

Prevent Layout Shift from Font Weight Change

Rene Wang·

The fix uses a CSS technique where each nav link gets an invisible ::after pseudo-element with font-semibold and the same text content (via data-text attribute). This reserves the bold text width at all times, so toggling font-semibold on the visible text no longer changes the element's size.

Live Demo

More Details