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

https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover

HTML

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>

CSS

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;
}