Text Decoration

The text-decoration CSS property sets the appearance of decorative lines on text. This could be underline, overline, line-through or a combination of lines. The text-decoration property is also a shortcut for setting the following:

• text-decoration-line: accepts values of underline, overline, and line-through
• text-decoration-style: is used to define the type of text decoration
• text-decoration-color: Changes the color of the text

This means that the text-decoration-style, combined with text-decoration-line and text-decoration-color can be specified with the text-decoration property!

The text-decoration property can be declared without specifying values for the color and style properties.

Here are the values for the text-decoration property:

• none: there is no line drawn and any existing decoration is removed
• initial: sets this property to its default value
• inherit: inherits this property from its parent element
• underline: draws a line across the text
  • Underlines are a way to bring attention to important text. Sometimes, underlines are most often associated with hyperlinks. Underlined text has become one of the most common feature of our online experience. Off the web underlines are great for emphasis since they draw attention to important parts of the message.

You can view the website here.

• strikethrough/line-through: draws a line across the text at it’s “middle” point
  • A strikethrough is an effect that causes text to appear as though it is crossed out. It is mostly used to mark text that is mistaken or text that needs to be removed. Legislators often use this to show where laws have been modified, printing new portions of the law with a strikethrough as seen below.

(Please note that this screenshot was taken from a PDF version of a New Jersey law revision)

• overline: draws a line directly across it’s “top point”
  • This might not be the most common typography effect, but it is interesting. It could also be used as a horizontal rule that is used to break up sections of texts. (The example below is what I would do to break up section of notes when there is a new topic in class)

Example of different text decoration values:

See the Pen CSS Text Decorations by Isabel Gleyze (@isabel-gleyze) on CodePen.

You can also combine the underline, overline or line-through values together to add multiple decoration lines:

See the Pen CSS Archaeology by Isabel Gleyze (@isabel-gleyze) on CodePen.

If you want to get a little fancy, there are other styles of lines you can do:

• wavy: creates a wavy line
• dotted: a dotted line
• dashed: a line consisting of dashes
• double: a double solid line

See the Pen Fancy Text by Isabel Gleyze (@isabel-gleyze) on CodePen.

The text-decoration property is supported by the following browsers: Chrome, Explorer, FireFox, Opera, and Safari.

The text-decoration property can be used to make your text a little bit more interesting.  The text-decoration property is very easy to use, allowing users to add lines through or around your text. There are of course other ways to mess around with the appearance of text, but I thought this was a really fun and simple way of doing so.