CSS - text-decoration

The text-decoration property is used to add "decorations" to inline content, such as an underline, overline, line-through and strikethrough over a piece of text.

It is a shorthand property for the following properties:

  • text-decoration-line: Sets the type of decoration line (underline, strikethrough or overline).

  • text-decoration-color: Sets the color to the text decoration.

  • text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid, wavy, double, etc.)

  • text-decoration-thickness: Sets the thickness to the text decoration.

Text Decoration Line

The property text-decoration-line is used to add a decoration line to the text, such as, underline.

Possible Values

  • none − No decoration should be added to the inline text.

  • underline − An underline is drawn beneath the inline text.

  • overline − An overline is drawn above the inline text.

  • line-through − A line should be drawn through the middle of the inline text.

  • blink − The inline text should blink on and off, analogous to the BLINK element introduced by Netscape.

Applies to

All the HTML elements.

DOM Syntax

object.style.textDecorationLine = "underline";

CSS text-decoration - With text-decoration-line Property

<html>
<head>
</head>
<body>
   <h2>Text Decoration Line</h2>
      <p style="text-decoration-line: overline;">Overline text decoration.</p>
      <p style="text-decoration-line: line-through;">Line-through text decoration.</p>
      <p style="text-decoration-line: underline;">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - With text-decoration-color Property

The property text-decoration-color is used to add color to the text decoration line. In order to use this property, you need to specify text-decoration-line.

Possible Values

  • keyword: A color name as keyword. Example = red.

  • hexadecimal: A hexadecimal value. Example = #00ffff.

  • rgb An rgb value. Example = rgb(255,200,100).

Applies to

All the HTML elements.

DOM Syntax

object.style.textDecorationColor = "#00ffff";

Example

Let us see an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Color</h2>
      <p style="text-decoration-line: overline; text-decoration-color: red">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-color: green">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-color: blue">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - With text-decoration-style Property

The property text-decoration-style is used to add style to the text decoration line. In order to use this property, you need to specify text-decoration-line.

Possible Values

  • solid

  • dotted

  • dashed

  • double

  • ridge

  • inset

  • outset

Applies to

All the HTML elements.

DOM Syntax

object.style.textDecorationStyle = "dotted";

Example

Let us see an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Style</h2>
      <p style="text-decoration-line: overline; text-decoration-style: dashed">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-style: solid">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-style: dotted">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - With text-decoration-thickness Property

The property text-decoration-thickness is used to add thickness to the text decoration line. In order to use this property, you need to specify text-decoration-line.

Possible Values

  • length: Any length value (in px, pt, in, cm, etc.)

  • auto: Browser chooses the appropriate width.

  • percentage: Specifies the thickness as percentage of 1em in the current font.

Applies to

All the HTML elements.

DOM Syntax

object.style.textDecorationThickness = "5px";

Example

Let us see an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Thickness</h2>
      <p style="text-decoration-line: overline; text-decoration-thickness: 2px">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-thickness: 1pt">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-thickness: 0.25in">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - With text-decoration-offset Property

The property text-underline-offset is used to set the offset distance of the text decoration line from its original position.

The property text-underline-offset is not a part of the shorthand text-decoration. This property only impacts the underlining and no other value for text-decoration-line, such as strikethrough or overline.

Possible Values

  • auto: Browser chooses the appropriate offset.

  • length: Any length value (in px, pt, in, cm, etc.).

  • percentage: Specifies the offset as percentage of 1em in the current font.

Applies to

All the HTML elements.

DOM Syntax

object.style.textUnderlineOffset = "2pt";

Example

Let us see an example:

<html>
<head>
<style>
   p {
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>Text Underline Offset</h2>
      <p style="text-decoration-line: underline; text-decoration-style: wavy; text-underline-offset: 1em;">Offset for underline.</p>
      <p style="text-decoration-line: overline; text-decoration-style: dotted; text-underline-offset: 1in;">No offset for overline.</p>   
</body>
</html>

CSS text-decoration - with text-underline-position Property

The property text-underline-position is used to set the position of the text decoration line (underline only) from its original position.

The property text-underline-offset is not a part of the shorthand text-decoration. This property only impacts the underlining and no other value for text-decoration-line, such as strikethrough or overline.

Possible Values

  • auto: Browser chooses the appropriate position, either at or under the baseline of the text.

  • under: Places the line under the baseline.

  • left: Places the line on left (for vertical writing mode); and under (for horizontal writing mode).

  • right: Places the line on right (for vertical writing mode); and under (for horizontal writing mode).

  • under left: Places the line under the baseline on left.

  • right under: Places the line under the baseline on right.

Applies to

All the HTML elements.

DOM Syntax

object.style.textUnderlinePosition = "under";

Example

Let us see an example:

<html>
<head>
</head>
<body>
   <h2>Text Underline Position</h2>
      <p style="text-decoration-line: underline; text-underline-position: under;">Position of line under the baseline.</p>
</body>
</html>
Advertisements