#lineheight

Underlines and line height I was thinking about something I wrote yesterday when I was talking about styling underlines on links: > For a start, you can adjust the distance of the underline from the text using `text-underline-offset`. If you’re using a generous line-height, use a generous distance here too. For some reason, I completely forgot that we’ve got a line-height unit in CSS now: `lh`. So if you want to make the distance of your underline proportional to the line height of the text that the link is part of, it’s easy-peasy: text-underline-offset: 0.15lh; The greater the line height, the greater the distance between the link text and its underline. I think this one is going into my collection of CSS snippets I use on almost every project.

so many things I still don‘t know #css #underline #lineheight #a11y

https://adactio.com/journal/22085

Underlines and line height How to make the distance of link underlines proportional to the line height of the text.

adactio.com/journal/22085

so many things I still don‘t know #css #underline #lineheight #a11y

Original post on adactio.com

Underlines and line height I was thinking about something I wrote yesterday when I was talking about styling underlines on links : For a start, you can adjust the distance of the underline from the...

#css #styling #frontend #development #links #underlines […]

[Original post on adactio.com]

Animated gif. Codepen demo. On top right control in black with white text "Line Height", with slider. On moving the slider, the text in two columns (lorem ipsum), is expanding and contracting. On the left with Fix, overlapping the text. On right, the text don't overlap leaving a gap between the lines.

🟢⚫️ Fixing Text Clipping in Divs with Overflow Hidden
A Solution for Line-Height Less Than 1.2
by Fabio Ottaviani @supahfunk
On @CodePen
#webdev #webfonts #LineHeight #TextClipping

codepen.io/supah/full/R...