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 certain lowercasee characters? In these cases it's nicer not to underline these lowercase letters like {g,q,p,j, y}

CSS: h1{ text-decoration: underline; }
PAGE TITLE: George quietely jumped!

A) Is there any way one could achieve such a delicate and advanced styling rule?
B) What other Latin characters do we want to un-underline?
C) How to set the thickness/thinness of the underline?

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