DEV Community

Šime Vidas
Šime Vidas

Posted on • Updated on

CSS properties for adjusting text underline offset and thickness are coming to Safari

Text underlines added via the CSS text-decoration: underline declaration are not drawn uniformly by the different browser engines. The underlines differ in thickness and vertical position.

A comparison of how the heading “Quaggy papaya juice” is underlined in Chrome, Firefox, and Safari

This may be part of the reason why some websites such as Smashing Magazine use a hack based on CSS backgrounds to draw more consistent link underlines across browsers. (I have copied this approach for Web Platform News.)

The set of CSS properties used to draw text underlines on Smashing Magazine

The preview version of Safari (since Technology Preview 70) supports two new CSS properties that enable authors to adjust the thickness and offset of text underlines. These properties are defined in the CSS Text Decoration 4 module.

h1 {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 0.1em;
}
Enter fullscreen mode Exit fullscreen mode

Try out the demo here: https://output.jsbin.com/busaboz/quiet.

Top comments (0)