Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Text Decorations

Text decorations might sound like more fun than they really are, but they are at least useful. The possible values for the text decoration property are:

none | underline | overline | line-through

While “none” may not seem like a useful value, it really is. It’s used to remove the default underline from text links. Many people, including me, think the link text is easier to read without the underline, and that links just look better without it.

Be careful about removing the underline from links and also changing the default link color, though. Some people, especially newbies, may not realize the link is a link without one of the normal visual clues.

OK, this next part is going to seem like Captain Obvious material, but if I don’t say it someone won’t get it . . . the underline value underlines text, the overline value creates a line above the text, and the line-through value creates a horizontal line through the center of the text.

There now, that wasn’t so bad, was it? There used to be a "blink" value as well, but few browsers supported it. Know why? It sucked to have constantly flashing text! If you don't believe that just blink your eyes real fast while trying to read this page. smile emoji

Here’s an example of how to use the text-decoration property and value to remove the underline from links:

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

If you remove the underline from your links, you don’t have to remove the underline from each link state, but most professional web designers do. One decent change up to that norm is to have an underline, or an underline and overline, for the hover state.

Text decorations can be used with any text element. Other uses might include using the underline value to emphasize a word or phrase; or using the line-through to cross out the regular price of an item before offering it at a lower sale price. Here’s how to use an inline style to create a line through the old price of an item on sale:

Regular price: <span style="text-decoration: line-through;">$49.95</span>
Sale Price $39.95!

On a web page that looks like this:

Regular price: $49.95
Sale Price: $39.95!

PS – Did you try to read that sentence while rapidly blinking your eyes?

If so … gotcha! It's all good. wink emoji

Going Deeper

If you want, you can style the text decorations. Here are the options:
text-decoration-line
Sets which text decoration to use: underline, overline, line-through.
text-decoration-color
Sets the dinner table, or the color, I forget which. ;)
text-decoration-style
Sets the line style (See the borders tutorial for examples.)
text-decoration-thickness
Sets the line thickness

There are also values of initial and inherit. Inherit simply means a property's value is inherited from its parent element. Initial is less common, so let me explain it...

Initial Value Example

Initial lets you set a value for a property, color for example, while retaining the initial color for specified elements. So you could change the text color for a division, while retaining the initial color for a heading within that division.

div.blue {color: blue;}
h1 {color: initial;}

Let's try that out below...

Here's an Example

This text should be blue, while the heading should be black.

That was coded like I showed in the code example, with a division element with the blue class added to the div element to make it happen. The one exception I made was to add a left margin to the division set it apart.

Essentials

Drawing Board

Notices

Sample Graphics


  • Memes

  • Patterns

  • Templates

  • Art

  • Textures

  • Emojis