The text-decoration Property

The text-decoration property produces the following text effects: underline, overline, line-through, and blink.

The text-decoration property can be applied to any element. It is not an inherited property. Its initial value is none. The following keywords can be its values: underline, overline, line-through, blink, none and inherit. The following keywords can be used together to combine their effects: underline, overline, line-through, and blink.

The text-decoration property does not affect the line-height of an element.

text-decoration:underline

The text-decoration:underline declaration produces a line under the text (and any spaces) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn below the baseline.

In Firefox 3 and Firefox 3.5, if text-decoration:underline is applied to a <p> containing a span, the underline is covered by the span's background color or background image. However, if the span does not have a background-color or background-image specified, then the underline is visible. In Internet Explorer however, the underline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, underlines are drawn below images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, underlines are not drawn below images.

Example 1: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:underline">the five boxing wizards @&Acirc;</p>

<

In the above example, the underline is 2px thick and at a height of 2px from the bottom of the content area. In Internet Explorer 6 and Internet Explorer 7, the underline is 1px thick and 3px from the bottom of the content area.

text-decoration:overline

The text-decoration:overline declaration produces a line above the text (and any space characters) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn at the top of the content area.

In Firefox 3 and Firefox 3.5, if text-decoration:overline is applied to a <p> containing a span, the overline is covered by the span's background color or background image. However, if the span does not have a background color or background image specified, then the overline is visible. In Internet Explorer however, the overline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, overlines are drawn above images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, overlines are not drawn above images. In Firefox 3 and Firefox 3.5, tall images may cover an overline.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:overline">the five boxing wizards @&Acirc;</p>

 

In the above example, the overline is 2px thick and is at the top of the content area. In Internet Explorer 6 and 7, the overline is 1px thick.

text-decoration:line-through

The text-decoration:line-through declaration produces a line through the middle of the text in an element. In Firefox 3, Firefox 3.5, Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the thickness of the line depends on the font size of the element. However, these browsers don't all draw a line of the same thickness for a give font size.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is visible even through spans that have a background color or background image specified. In Internet Explorer 6, Internet Explorer 7 and in Internet Explorer 8, just like for underline and overline, the line is visible in spans that have a background color or image.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is drawn over images. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the line is not drawn through images.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:line-through">the five boxing wizards @&Acirc;</p>

 

In the above example, the line is 2px thick and at a height of 15px in Firefox 3, Firefox 3.5 and Internet Explorer 8. In Internet Explorer 6 and Internet Explorer 7, the line is 4px thick and at a height of 15px.

text-decoration:blink

The text-decoration:overline declaration causes the text of the element to blink. Firefox 3 and Firefox 3.5 support the blink feature, but not Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8.

In Firefox 3 and Firefox 3.5, only text blinks, not images.

Example 4: <p style="text-decoration:blink">the five boxing wizards @&Acirc;</p>

text-decoration and descendant elements

According to the w3.org CSS specification, text-decoration is not an inherited property. However, text-decoration overlines, underlines and line-throughs that are applied to an inline-level or block-level elements also appear over descendant elements.

The color of the text-decoration line depends on the value of the color property of the element that the text-decoration declaration was directly applied to, and the line remains the same color in descendant elements.

In Firefox 3 and Firefox 3.5, the thickness of the text-decoration line depends on the font size of the element that the text-decoration declaration was applied to. However, in Internet Explorer 8 thickness of the text-decoration underline and overline depends on the font-size of the tallest em box on the line in which the text-decoration line appears. However, the thickness of the line-through depends on the font-size of the text in which the line-through appears. In Internet Explorer 6 and Internet Explorer 7, the text-decoration underline and overline is always 1px thick, but the thickness of the line-through depends on the font size of the text in which the line-through appears.

In Firefox 3 and Firefox 3.5 the position of the text-decoration line is dependent on the font size of the element that the text-decoration declaration was applied to. In Internet Explorer 8 and below, the position of the text-decoration line is dependent on the tallest em box in the element.

Example 5: <p style="font-family:'Times New Roman';font-size:55px;color:black;text-decoration: line-through"><span style="font-size:25px;color:red">the five boxing wizards jump </span><span style="font-size:35px">quickly</span></p>

 

The picture above shows how the example code is rendered in Firefox 3 and Firefox 3.5. In those browsers, the line-through is at a height appropriate for 55px text even though the element does not contain a single glyph that is of 55px. The color of the line is black because the value of the color property for the <p> is black. The thickness of the line-through is based upon the font size of the <p>. In Internet Explorer 6 and Internet Explorer 7, and Internet Explorer 8 there are two separate line-throughs, one for each span and of different thickness, based on the font size of each span. The color of the line-through is black, based on the color declaration on the <p>.

text-decoration:inherit

The text-decoration:inherit declaration prevents the parent element's text-decoration declaration from having any effect on an element and causes the element to inherit the parent element's text-decoration declaration as its own.

Internet Explorer 6 and Internet Explorer 7 ignore the text-decoration:inherit declaration.

text-decoration:none

The initial value of text-decoration is none. Therefore, the declaration text-decoration:none is useful in overriding another text-decoration declaration that has been applied to an element.

Multiple text-decoration values in a declaration

The text-decoration property can have more than one of the following values: underline, overline, line-through, and blink. Each value is separated from the next by a space. When the property has more than one value, the effect of each value is combined.

Example 6: <p style="text-decoration:underline overline ">the five boxing wizards @&Acirc;</p>

In the above example, the text of the <p> will have both an underline and overline.

Concluding Notes

The text-decoration property should be used with caution on elements that have descendants. This is because the text decoration that was specified on the parent also appears in the descendants. In such a situation, there is no way to remove the text decoration from the descendant elements.

The text-decoration declaration should not be used on elements on that contain images because of differences in rendering between Firefox and Internet Explorer 8 and below.

text-decoration:blink is not supported in Internet Explorer 8 and below.

For consistent rendering in all browsers, one should avoid using text-decoration on an element that contains text of different font-sizes.