UsableTypeTypography for the World Wide Web

style guide

Text Decoration

The text-decoration property is one of the most often used styling properties and offers a number of interesting and useful features.

The default value of text-decoration is none. This is true for all elements except the anchor element <a>, which all browsers underline by default. It is possible to turn the underlining of links off, and this would be done by the following declaration:

a {text-decoration:none;}

Whether this should be done or not is one of personal preference. In terms of usability, if you are going to turn off link underlining, which many people do, make sure you have an alternative way for users to recognise hyperlinks on the page.

The value overline works identically to underline except that the line displayed runs along the top of the text rather than underneath it. Using both the underline and overline values together produces an interesting effect which could be used to emphasize parts of text.

.important {text-decoration:underline overline;}

<p>This text has some information which is <span class="important">extremely important </span> to you.</p>

This text has some information which is extremely important to you.

The value line-through (note the dash in the value) causes a text element to have a solid line through the middle of the text. This effect is sometimes used to show that text is old or outdated while keeping the words readable. There is also an increasingly popular trend of displaying visited links with a line through the middle, clearly identifying pages a user has already been to.

The value of blink causes the defined element to flash on and off on the screen. Again, be aware of usability with this as some people find blinking text to be more annoying than helpful. The effect will not show up in print… not in our experience anyway.

Inheritance in Text Decoration

The CSS Specification says that the text-decoration property is not inherited. For some that have used this feature in any extensive way this may come as a surprise. This is because of the strange way that browsers render text decorations, making it appear that the values are inherited by their child elements.

p {text-decoration:underline;}

em {text-decoration:none;}

<p>Here is some underlined text, and some which <em>also appears to be underlined</em>, despite the fact it is not styled as such.</p>

Here is some underlined text, and some which also appears to be underlined, despite the fact it is not styled as such.

Notice how the element which has been declared to have no underline actually does appear to be underlined. The truth is that the <em> element does not have an underline, but the <p> element’s underline stretches from the beginning of the element to the end, and this includes the <em> element.

Therefore, if you want the <em> to not be included in the underline, the mark-up and css would have to be changed to:

p span {text-decoration:underline;}

em {text-decoration:none;}

<p><span>Here is some underlined text, and some which </span><em>also appears to be underlined</em>,<span> despite the fact it is not styled as such.<span></p>

Here is some underlined text, and some which also appears to be underlined,despite the fact it is not styled as such.

Of course, the none styling of the em would not be needed in this case, as none is the initial value anyway and therefore the default.

text-decoration
Values: none | [ underline || overline || line-through || blink ] | inherit
Initial Value: none
Applies to: all elements
Inherited: no
Percentages: N/A

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close