Skip to main content

An Intro to the CSS text-decoration Property

By Adam Roberts

HTML & CSS

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

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;
}

Value

  • 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.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.