You may possibly not think that shifting an wordpress ðàáîòà underline a number of pixels and changing its thickness is particularly chopping-edge or intriguing.
Nevertheless it depends on two CSS properties, textual content-decoration-thickness and textual content-underline-offset, which have only just lately been introduced to some browsers.
As a consequence, we experienced to invest some time comprehension just how these new qualities labored, and whether or not they have been mature adequate to use.
A fast primer on shorthand homes
Just before we commence digging in to the text-decoration property, it’s useful to understand a few factors about shorthand houses in CSS.
Quoting seriously from the superb overview of shorthand CSS houses on MDN Net Docs:
Throughout this report I’m also going to use the phrase ‘longhand’ to refer to homes that are not shorthand homes.
With that out the way, enable consider a brief trip back in time to see how the text-decoration property has changed.
So, you could use it to include decoration to your textual content, but you experienced no handle in excess of its physical appearance – you have been constrained to a sound line with its color and thickness primarily based on the text.
CSS Textual content Decoration Module Degree 3 (2019)
CSS Text Decoration Module Level 3 released new text-decoration-line, text-decoration-style and text-decoration-coloration qualities.
Yet again, it changes the text-decoration shorthand property to consist of the new text-decoration-thickness.
Nevertheless, the textual content-underline-offset house is intentionally excluded from the shorthand property, and has to be set independently:
As a end result, the thickness, color and design are all reset to their first person-agent defaults, and when hovering in excess of our link we just get a dull default underline.
The exception to this is, once yet again, Safari, where textual content-decoration is not a shorthand house, and as an alternative acts like a form of alias for textual content-decoration-line. Not like other browsers it does not set the other textual content-decoration-* properties again to initial.
