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

I had the same problem, but got a similar effect with a little compromise, I used text-shadow instead.

li:hover {text-shadow:0px 0px 1px black;}

Here's a working example:

body {
  font-family: segoe ui;
}

ul li {
  display: inline-block;
  border-left: 1px solid silver;
  padding: 5px
}

.textshadow :hover {
  text-shadow: 0px 0px 1px black;
}

.textshadow-alt :hover {
  text-shadow: 1px 0px 0px black;
}

.bold :hover {
  font-weight: bold;
}

  
Item 1
  
Item 2
  
Item 3
  
text-shadow: 0px 0px 1px black;



  
Item 1
  
Item 2
  
Item 3
  
text-shadow: 1px 0px 0px black;



  
Item 1
  
Item 2
  
Item 3
  
font-weight: bold;

jsfiddle example