You probably know text-decoration: underline;.
But do you know what else it can do?
Most developers stop at text-decoration: underline; But CSS has a whole toolbox of styling options hiding in plain sight.
Here are some underrated text-decoration properties you can be using:
-
text-decoration-thickness: 5px; Control the thickness of the line
-
text-decoration-color: deeppink; Change the line’s color (it can be animated independently of the text’s color)
-
text-decoration-style: solid | dashed | wavy; Customize the line’s appearance
-
text-decoration-skip-ink: auto | none; Decide whether the line should skip descenders (like g/j/y)
-
text-decoration-line: underline | overline | line-through; Choose the position(s), or combine them
-
text-underline-offset: 1em; Offset the line for better spacing and clarity
Perfect for giving your typography more control and visual polish.
Bonus: it’s supported in all browsers.
I’m working on an ebook called “You Don’t Need JavaScript”.
To get notified when it launches 👉 https://theosoti.com/you-dont-need-js/