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

The best working solution using ::after

HTML

  EXAMPLE TEXT

CSS

li::after {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

It adds an invisible pseudo-element with width of bold text, sourced by title attribute.

The text-shadow solution looks unnatural on Mac and doesn't utilize all the beauty that text rendering on Mac offers.. :)

http://jsfiddle.net/85LbG/

Credit: https://stackoverflow.com/a/20249560/5061744