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).
Advertisements