Css text decoration styling

CSS Text Decoration

In this chapter you will learn about the following properties:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.

Example

h1 <
text-decoration-line: overline;
>

h2 text-decoration-line: line-through;
>

h3 text-decoration-line: underline;
>

p text-decoration-line: overline underline;
>

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

Example

h1 <
text-decoration-line: overline;
text-decoration-color: red;
>

h2 text-decoration-line: line-through;
text-decoration-color: blue;
>

h3 text-decoration-line: underline;
text-decoration-color: green;
>

p text-decoration-line: overline underline;
text-decoration-color: purple;
>

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

Example

h1 <
text-decoration-line: underline;
text-decoration-style: solid;
>

h2 text-decoration-line: underline;
text-decoration-style: double;
>

h3 text-decoration-line: underline;
text-decoration-style: dotted;
>

p.ex1 text-decoration-line: underline;
text-decoration-style: dashed;
>

p.ex2 text-decoration-line: underline;
text-decoration-style: wavy;
>

p.ex3 text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
>

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

Example

h1 <
text-decoration-line: underline;
text-decoration-thickness: auto;
>

h2 text-decoration-line: underline;
text-decoration-thickness: 5px;
>

h3 text-decoration-line: underline;
text-decoration-thickness: 25%;
>

p text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
>

The Shorthand Property

The text-decoration property is a shorthand property for:

• text-decoration-line (required)
• text-decoration-color (optional)
• text-decoration-style (optional)
• text-decoration-thickness (optional)

Example

h1 <
text-decoration: underline;
>

h2 text-decoration: underline red;
>

h3 text-decoration: underline red double;
>

p text-decoration: underline red double 5px;
>

A Small Tip

All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this:

Example

All CSS text-decoration Properties

Property	Description
text-decoration	Sets all the text-decoration properties in one declaration
text-decoration-color	Specifies the color of the text-decoration
text-decoration-line	Specifies the kind of text decoration to be used (underline, overline, etc.)
text-decoration-style	Specifies the style of the text decoration (solid, dotted, etc.)
text-decoration-thickness	Specifies the thickness of the text decoration line

Источник

CSS text decoration

The CSS text decoration module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.

Reference

Properties

• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-shadow
• text-underline-offset
• text-underline-position

Examples

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Specifications

Found a content problem with this page?

Источник

text-decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.

Try it

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup

This text has some emphasized words in it.

, the style rule p < text-decoration: underline; >would cause the entire paragraph to be underlined. The style rule em < text-decoration: none; >would not cause any change; the entire paragraph would still be underlined. However, the rule em < text-decoration: overline; >would cause a second decoration to appear on «some emphasized words».

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline; text-decoration: overline red; text-decoration: none; /* Global values */ text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset; 

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

Sets the kind of decoration used, such as underline or line-through .

Sets the color of the decoration.

Sets the style of the line used for the decoration, such as solid , wavy , or dashed .

Sets the thickness of the line used for the decoration.

Formal definition

• text-decoration-color : currentcolor
• text-decoration-style : solid
• text-decoration-line : none

• text-decoration-line : as specified
• text-decoration-style : as specified
• text-decoration-color : computed color
• text-decoration-thickness : as specified

• text-decoration-color : a color
• text-decoration-style : discrete
• text-decoration-line : discrete
• text-decoration-thickness : by computed value type

Formal syntax

Examples

Demonstration of text-decoration values

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The individual text-decoration properties are text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness .
• The text-decoration-skip-ink , text-underline-offset , and text-underline-position properties also affect text-decoration, but are not included in the shorthand.
• The list-style attribute controls the appearance of items in HTML and lists.

Found a content problem with this page?

This page was last modified on Apr 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник