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.
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 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;
}
Try out the demo here: https://output.jsbin.com/busaboz/quiet.
Top comments (0)