text-decoration is a useful CSS shorthand
text-decoration is not just an on-or-off switch for underlines. It is shorthand for text-decoration-line, text-decoration-style, and text-decoration-color.
a {
text-decoration: underline dotted blue;
}
This gives the link a blue, dotted underline in one declaration. You can write the three longhand properties separately when that is clearer, but the shorthand is handy for small rules like this one.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- Why 100vh Doesn’t Always Fit a Mobile Screen
Choose svh, lvh, dvh, or a flexible min-height when mobile browser controls make 100vh an awkward fit.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.