underline
maybe use overline or line-through here as we have given examples of underline only
3 Matching Annotations
- Dec 2023
-
www.programiz.com www.programiz.com
-
-
Let us see an example, HTML CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>CSS text-decoration</title> </head> <body> <h1>Shorthand Text Decoration</h1> <p> We can <span>decorate</span> our text using CSS text-decoration property. </p> </body> </html> /* shorthand property to set text-decoration*/ p span { text-decoration: underline wavy red 2px; } /* This above code is equivalent to p span { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; text-decoration-thickness: 2px; } */ Browser Output
Different section
-
For example, HTML CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>CSS text-decoration</title> </head> <body> <h1>Text Decoration</h1> <p class="underline">text-decoration: underline;</p> <p class="line-through">text-decoration: line-through;</p> <p class="overline">text-decoration: overline;</p> </body> </html> p.underline { /* draws a 1px line below the text at the baseline */ text-decoration: underline; } p.line-through { /* draws a 1px line across the text in the middle */ text-decoration: line-through; } p.overline { /* draws a 1px line above the text at the top */ text-decoration: overline; }
different section
-