The CSS style of text-decoration is used very often but only at a very basic level. This style actually has some hidden powers that could be very very useful for you.
Let’s explore what I have found a lot of developers did not know about text-decoration.
1. You can change the style of the decoration
So we all basically use the text-decoration of undeline but did you know you can style this line? Not many people do know that. The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied.
solid: the default. Decoration is a single solid line.double: Decoration is a pair of solid lines.dotted: Decoration is a dotted line.dashed: Decoration is a dashed line.wavy: Decoration is a wavy line.
As an example this would underline your link with a wavy line:
a {
text-decoration-style: wavy;
}
Of course there is a shorthand for this too, if the broeser has support (see below) for this and text-decoration-color (up next), then you can use the text-decoration shorthand like so:
a {
text-decoration: underline wavy red;
}
Obviously you will need to know your browser support for this:
| hrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | None | 6 † | None | None | None | None |
* only with experimental web platform features flag enabled
† Firefox 6+ with -moz prefix, 36+ unprefixed.
2. You can change the colour of the decoration
We usually just accept that the text-decoration on our element is the same colour as the text, but you can actually change that colour should you want to. The style text-decoration-color can do that for you like so:
a {
text-decoration-color: #f0b003;
}
Browser support for this property:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31*† | 7.1* | 6.0‡ | None | None | None | 8* |
* with -webkit prefix
† with the “experimental Web Platform features” turned on in chrome://flags
‡ 6+ with -moz prefix, unprefixed as of 36.
3. You can have more than one decoration on an element
As mentioned before we all usually just stick an underline or a none on our text-decoration styles but did you know you can have much fancier decoration by declaring multiple decorations? For example a nice style some designers like to use is a word with a line above and a line below. Developers will usually achieve that by many ways like a background-image, spans styled, :before and :after styles but you can achieve this much easier by combining the text-decoration of undeline and overline!
This would give you a word with an underline and overline applied to it:
a {
text-decoration: underline overline;
}
Browser support for this is as follows:
All browsers support the CSS2.1 “longhand” property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any * † | Any * | Any | Any ‡ | Any ‡ | Any ‡ | Any * |
* text-decoration fully supported, sub-properties supported with -webkit prefix.
† sub-properties additionally require experimental web platform features flag enabled.
‡ CSS2.1 text-decoration only; sub-properties not supported.