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


sometimes don't want underline blindly cutting through underlined page title!
is there way automatically elegantly disable underline lowercasee characters? in these cases it's nicer not underline these lowercase letters {g,q,p,j, y}

enter image description here

css: h1{ text-decoration: underline; }
page title: george quietely jumped!

a) there any way 1 achieve such delicate , advanced styling rule?
b) other latin characters want un-underline?
c) how set thickness/thinness of underline?

you can fake underline border-bottom. can work single lines , if display properties allows element shrink on content. (just avoid block ).

here example display:table allow center text , break line before , after : http://codepen.io/gc-nomade/pen/vjokb/ what's idea ?

  1. setting smaller line-height font-size, cause text overflow container.
  2. draw bottom border underline text
  3. svg offers stroke , in css , can similar increasing text-shadow same color background.
  4. demo , you can set different color simili underline , add dropping shadow. result

in older browser lose box-shadow option, still can use double, groove or ridge border styles different color text.


thanks @patnewell sharing link : https://medium.com/designing-medium/7c03a9274f9


Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

inno setup - TLabel or TNewStaticText - change .Font.Style on Focus like Cursor changes with .Cursor -