Skip to content

Fix Bold on Hover Styles

• 1 min read

Add a hidden pseudo element with the same text string but set it to the bold font size

example: https://codepen.io/hexagoncircle/pen/WNrYPLo

.menu.fix .menu-link::after {
content: attr(data-text);
content: attr(data-text) / "";
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: var(--bold);

@media speech {
display: none;
}
}