CSS text-decoration
CSS text-decoration property decorates the text with several kinds of lines. This is shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.
text-decoration-line:
text-decoration like overline, underline, or line-through.
Example:
<!DOCTYPE html> <html> <head> <title>text-decoration</title> <style> body { text-align: center; } p{ font-size: 30px; } #p1 { text-decoration: underline; } #p2 { text-decoration: line-through; } #p3 { text-decoration: overline; } #p4 { text-decoration: overline underline line-through; } </style> </head> <body> <div> <p id="p1">This is underline</p> <p id="p2">This is line-through</p> <p id="p3">This is overline</p> <p id="p4">This is the combination of lines</p> </div> </body> </html>
OUTPUT:
text-decoration-style:
The values are solid, dotted, wavy, double, and dashed.
Example:
<!DOCTYPE html> <html> <head> <title>text-decoration</title> <style> body { text-align: center; } p{ font-size: 30px; } #p1 { text-decoration: underline double; } #p2 { text-decoration: line-through dashed; } #p3 { text-decoration: dotted overline; } #p4 { text-decoration: lightblue wavy overline underline line-through; color:red; } </style> </head> <body> <div> <p id="p1">This is double underline</p> <p id="p2">This is dashed line-through</p> <p id="p3">This is dotted overline</p> <p id="p4">This is the wavy combination of lines</p> </div> </body> </html>
OUTPUT:
text-decoration-color:
The value is any color in a valid format.
Example:
<!DOCTYPE html> <html> <head> <title>text-decoration</title> <style> body { text-align: center; } p{ font-size: 30px; } #p1 { text-decoration: underline double cyan; } #p2 { text-decoration: line-through dashed green; } #p3 { text-decoration: dotted overline blue; } #p4 { text-decoration: lightblue wavy overline underline line-through; color:red; } </style> </head> <body> <div> <p id="p1">This is double underline</p> <p id="p2">This is dashed line-through</p> <p id="p3">This is dotted overline</p> <p id="p4">This is the wavy combination of lines</p> </div> </body> </html>
OUTPUT: