text-decoration (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Buggy | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS1, 2 |
Example
With the following rules applied, unvisited anchor links are bold, but have no underline, visited links have a line through them, and links in the hover or focus state have a line above and below them:
a:link {
font-weight: bold;
text-decoration: none;
}
a:visited {
font-weight: bold;
text-decoration: line-through;
}
a:hover, a:focus {
text-decoration: underline overline;
}Description
This property specifies the
decorations that will be applied to the text content of an element. These
decorations are rendered in the color specified by the element’s
color property.
The text decorations are not technically inherited, but the effect is similar to inheritance. If they’re set on an inline element, they apply to all boxes generated by that element. If they’re set on a block-level element, the setting is applied to an anonymous inline box that encompasses all inline children in the normal flow, and also to all block-level descendants in the normal flow. The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks.
Also, text decorations on inline boxes are rendered along the entire box, even if it contains descendant boxes. This, too, may appear similar to inheritance. Any text decoration setting on a descendant box can never “undo” the text decorations of an ancestor box.
Value
blink- This value makes the text blink. (Conforming user agents are allowed to ignore this value, since blinking content can be detrimental to a page’s accessibility.)
line-through- This value draws a horizontal line through the text.
none- This value produces no text decoration (although it doesn’t undo a decoration that’s set on an ancestor element).
overline- This value draws a horizontal line above the text.
underline- This value draws a horizontal line below the text.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for
Windows versions up to and including 7 don’t support the
blink property. Setting the value to
none will remove all text decorations from an
element, even if one or more decorations are specified for its parent
element. Text decorations are propagated to floating and absolutely
positioned descendants.
Internet Explorer for Windows versions up to
and including 6 place the line-through line
noticeably higher above the baseline than other browsers.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
Firefox versions up to and including 2 propagate text decoration values to floating descendants.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
