If you’ve tried making text bold on hover, you’ve likely noticed this annoying side effect: The layout shifts. The browser recalculates the width of the bolded text, causing a "jump." Avoid layout shifting when using Bold on Hover (Here’s how 👇): 1. Clone the text content with the `content: attr(data-content)` property. 2. Style the ::before to match the bold hover state. 3. Hide it but keeping its width in the layout. This trick is especially helpful for Nav links, tab links, or buttons where you want a smooth hover effect without layout shifts.

css,  css animation,  csstrick