Text Decoration

The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes, but also can be used to decorate text:

HTML file:	Displayed by browser:
<style> a { text-decoration: none; } h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } </style> <body> <h1>H1 heading is overlined</h1> <h2>H2 heading is line-through</h2> <h3>This is heading 3</h3> <p> This was covered in the <a href="../html_beg/css12.html" target="_blank">HTML tutorial</a> but here it it again. Notice that the link's underline has been removed. </p> </body>	H1 heading is overlined H2 heading is line-through This is heading 3 This was covered in the HTML tutorial but here it it again. Notice that the link's underline has been removed.

HTML file:

Displayed by browser:

<body>
<h1>H1 heading is overlined</h1>
<h2>H2 heading is line-through</h2>
<h3>This is heading 3</h3>
<p>
This was covered in the <a href="../html_beg/css12.html" target="_blank">HTML tutorial</a> but here it it again. Notice that the link's underline has been removed.
</p>
</body>

H1 heading is overlined

H2 heading is line-through

This is heading 3

This was covered in the HTML tutorial but here it it again. Notice that the link's underline has been removed.

Note: It is not recommended to underline text that is not a link, as this often confuses users, because they expect all underlined text to be a link.