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 an Element's Overflow • Set the border-collapse • Set the box-sizing Property • Set the Text Alignment • Set the Border Width • Set an Element's Clipping • Use word-wrap Property to allow Line Breaks in the Middle of Words • Set an Element's Padding • position:absolute • Set the Background Color
|