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>
To Continue Learning Please Login
Login with Google