secrets about text decoration

What you might not know about text-decoration

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.

Leave a Reply

Your email address will not be published. Required fields are marked *