CSS: bolding some text without changing its container's size

Question

I have a horizontal navigation menu, which is basically just a

with the elements set side-by-side. I do not define width, but simply use padding, bec

Answer 1

Unfortunately the only way to avoid the width changing when the text is bold is to define the width of the list item, however as you stated doing this manually is time consuming and not scalable.

The only thing I can think of is using some javascript that calculates the width of the tab before it is bold, and then applies the width at the same time the bold is required (either when you hover or click).