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.