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

you can as well fake underline with a border-bottom. this can work for single lines and if display properties allows element to shrink on content. (just avoid block ).

here an example with a display:table to allow center text and break line before and after : http://codepen.io/gc-nomade/pen/vJoKB/ What's the idea ?

1. setting a smaller line-height than font-size, cause the text to overflow from its container.
2. draw a bottom border to underline text
3. SVG offers stroke , in CSS , we can do something similar increasing text-shadow with same color as background.
4. DEMO , you can even set a different color to the simili underline and add a dropping shadow.

   ---

In older browser you will lose the box-shadow option, but you still can use the double, groove or ridge border styles with different color than text.

---

Thanks @PatNewell for sharing this very link : https://medium.com/designing-medium/7c03a9274f9