Set the Text Decoration

By Stephen Bucaro

The CSS text-decoration property allows you to set several aspects of text including underlining text, lining through text, and overlining text. In addition, by setting text-decoration to none, you can remove default text decoration, i.e. you can display links without an underline.

To set text to be underlined, set the text-decoration property to underline. An example is shown below.

<p style="text-decoration: underline;">
Text Decoration is Underline
</p>

Text Decoration is Underline

To set text to be lined through, set the text-decoration property to line-through. An example is shown below.

<p style="text-decoration:line-through;">
Text Decoration is Line Through
</p>

Text Decoration is Line Through

To set text to be overlined, set the text-decoration property to overline. An example is shown below.

<p style="text-decoration: overline;">
Text Decoration is OverLine
</p>

Text Decoration is OverLine

To set link text to be displayed without an underline, set the text-decoration property to none. An example is shown below.

<a style="text-decoration: none;"
href="http://bucarotechelp.com">Click Here</a>

Click Here

To set the text decoration for some text within a paragraph, place the text to be decorated within a <span> element, and set the text-decoration property of the span to the desired value. An example is shown below.

<p>The second amendment
<span style="text-decoration:underline;">
does not</span>
give people the right to own a gun.</p>

The second amendment does not give people the right to own a gun.

The above example applies the text decoration value underline to some words within the sentence. This is not a good idea, as the underlined text might be mistaken for a link.