Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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>To set text decoration for some text 
<span style="text-decoration:underline;">within a paragraph</span>
and set the text-decoration property of the span to the desired value.</p>

To set text decoration for some text within a paragraph and set the text-decoration property of the span to the desired value.

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.

More CSS Quick Reference:
• Set List Bullets Position
• Set the Type of Bullet Used in List
• Set the Font Properties
• Set a Background Image
• Set an Element's Clipping
• Set the Background Color
• Set a Fixed Background Image
• Set an Element's Float
• Set an Element's Overlap (z-index)
• Set The Cursor Style