Disable underline for lowercase characters: g q p j y?

Question

Sometimes you don\'t want an underline blindly cutting through an underlined page title!
Is there a way to automatically elegantly disable underline for

Answer 1

If you know your background color (assuming white, in this case), give this a shot:

h1 {
    line-height: 0.9em;
    border-bottom: 1px solid black;
    text-shadow: 2px 2px #fff, -2px 2px #fff;
}

the idea:

1. use border-bottom, and reduce the line-height to pull the bottom of the h1 box model up.
2. apply two non-blurred, text shadows which will be rendered behind your text, and over your border-bottom. (The first, in this example, is 2px down and to the left; the second is 2px down and to the right.)

fiddle: http://jsfiddle.net/pmn4/a5LZE/

---

fyi - browsers don't play nicely with text-shadow; use it conservatively!