By using the text-shadow
technique outlined on this question - Disable underline for lowercase characters: g q p j y? it's possible to break the underline around lowercase letters that extend past the 'bottom' of the text line, when the background is a solid color.
However, obviously it doesn't work if there's a background image. Here's an example of the problem. Is there any way I can preserve the background image while leaving space around the 'p'? There's no way to apply a background image to text-shadow
in CSS, and I can't think of any other techniques that would make this possible. I'm open to any solution including jQuery, not just pure CSS approaches.