text-decoration

This property is a shorthand property that collectively controls the color, type, shape, and thickness of decoration lines.

Initial Value inherited from each individual property
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation Property-specific

The text-decoration property adds text decoration in the form of underlining, strikethrough, and lines above the text. More than one style can be applied simultaneously by listing values ​​separated by spaces.

In CSS3, the text-decoration property is also shorthand for the text-decoration-line, text-decoration-color, text-decoration-thickness, and text-decoration-style properties.

The most commonly used text decoration type is underlining. The underlined text is set with the underline value:

a {text-decoration: underline;}

If you need to remove the underlining, for example, remove the default link underlining, then you need to use the value none:

a {text-decoration: none;}

Often it is required not only to remove the underlining of the link in the normal state but to make the links underlined when the mouse cursor has hovered over them. To make a link underlined on hover, use the :hover pseudo-class :

a {text-decoration: none;}
 
a:hover {text-decoration: underline;}

Syntax

text-decoration: "none | underline | overline | line-through | initial | inherit";

/* You can also specify multiple values ​​in the same declaration: */

text-decoration: "underline line-through overline";

/* And the shorthand explanation: */

text-decoration: "text-decoration-line text-decoration-style text-decoration-color | initial | inherit";

Description

valuewhat it does
noneSpecifies normal text (no decoration). Default value.
underlineDefines a line below the text.
overlineDefines a line above the text.
line-throughDefines a line through text (strikethrough).
initialSets a property to its default value.
inheritSpecifies that the value is inherited from the parent element.

Examples

Below you’ll find examples of using the text-decoration property to achieve various effects.

text-decoration: underline;

Aliquam a nisl porttitor metus venenatis condimentum.

text-decoration: underline wavy green;

Aliquam a nisl porttitor metus venenatis condimentum.

text-decoration: line-through double #222;

Aliquam a nisl porttitor metus venenatis condimentum.

text-decoration: underline overline orange;

Aliquam a nisl porttitor metus venenatis condimentum.

text-decoration: underline solid yellow 3px;

Aliquam a nisl porttitor metus venenatis condimentum.