How to Create Menu Items That Become Bold on Hover without Changing Width and Affecting Other Menu Items


The most important thing to do to the menu item is give it a title with the same text as the menu item itself.

<a href="/entertainment/movies" data-analytics="header_screen" title="Screen">Screen</a>


The CSS somehow uses the text of that title attribute which we can make bold and invisible.

a.item:hover {
    font-weight: 600;
a.item:after {
    content: attr(title);
    font-weight: 600;
    display: block;
    color: transparent;