totn CSS

CSS: text-decoration property

This CSS tutorial explains how to use the CSS property called text-decoration with syntax and examples.

Description

The CSS text-decoration property defines the text formatting of an element such as underline, overline, line-through and blink.

Syntax

The syntax for the text-decoration CSS property is:

text-decoration: value;

Parameters or Arguments

value

The formatting of the text. It can be one of the following:

Value Description
underline Text has an underline
div { text-decoration: underline; }
overline Text has a line displayed above it
div { text-decoration: overline; }
line-through Text has a line through the middle of it
div { text-decoration: line-through; }
blink Text blinks
div { text-decoration: blink; }
none No text-decoration is applied to the text
div { text-decoration: none; }
inherit Element will inherit the text-decoration from its parent element
div { text-decoration: inherit; }

Note

  • Some browsers may ignore the blink text-decoration.

Browser Compatibility

The CSS text-decoration property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the text-decoration property below, exploring examples of how to use this property in CSS.

Using Underline

Let's look at a CSS text-decoration example where we use the underline text-decoration.

a:hover { color: #4A6593; text-decoration: underline; }

In this CSS text-decoration example, the text will display an underline when you hover over a link.

Using Line-Through

Next, let's look at a CSS text-decoration example where apply the line-through text-decoration.

span { text-decoration: line-through; }

In this CSS text-decoration example, we have set the text-decoration to line-through on the <span> tag.

Using None

Let's look at a CSS text-decoration example where we remove text-decoration.

a:link, a:active, a:visited { text-decoration: none; }

Traditionally, most sites display an underline for all links. However, some sites prefer to only display the underline when the user hovers over the link. In this CSS text-decoration example, we have removed text-decoration from the <a> tag for link, active, and visited (but not hover).

Share on: