Issue with Text Layout Shift on Hover

How To
1

Hello everyone,

I’m currently experiencing an issue on my website where the layout shifts when I hover over menu items, due to the text becoming bold.

Here’s the CSS code I’m using for the hover effect:

.brx-nav-nested-items a {
font-weight: 400 !important;
position: relative !important;
}
.brx-nav-nested-items a::before {
content: attr(title) !important;
font-weight: 700 !important;
visibility: hidden !important;
position: absolute !important;
top: 0;
left: 0;
}
.brx-nav-nested-items a:hover {
font-weight: 700 !important;
}
.brx-nav-nested-items a:hover::before {
visibility: visible !important;
}

I’ve tried a technique that involves using a pseudo-element with the same text string but set to the bold font size. The pseudo-element is visually hidden, but pre-bolded and still occupies width. So when the actual link text is bolded, it won’t take up any additional width. Unfortunately, this solution has not resolved the issue.

I would greatly appreciate any assistance in resolving this issue. If anyone has any insights or suggestions, please let me know.

Thank you in advance!

2

I usually use text shadow for this Using text-shadow instead of font-weight bold to avoid jumping

Takes a bit of fiddling around with the values so it doesn’t look blurry but I’ve found it to be the easiest way to achieve the bold on hover effect.

Your way seems interesting though, might try that. The way you currently have it though, you’re still setting the actual link to bold on hover instead of just the pseudo element. Also, personally, instead of visibility hidden on the pseudo, I’d do opacity 0 and add a transition so it smoothly goes to opacity 1 on hover.