text-decoration - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-decoration

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-decoration

Description

The text-decoration CSS property sets the decorations for the text content.

The following table summarizes the text-decoration Property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: Yes, as some of the properties of the shorthand are animatable.

Syntax

The syntax of the property is as follows: 


text-decoration:     none | [ underline | overline | line-through | blink ] one or more values | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
none no text decoration.
underlineadd underline to text.
overline add line above text.
line-through add line through to text.
blinkMakes the text blink.
inherit take the value of its parent element text-decoration property.

The example below shows the text-decoration property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS text-decoration property</title>
  <style type="text/css">
    a {<!--   w  w w . j  a va2s  .co  m-->
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    h1 {
      text-decoration: overline;
    }
    h2 {
      text-decoration: line-through;
    }
    h3 {
      text-decoration: underline;
    }
    h4 {
      text-decoration: blink;
    }
    </style>
 </head>
 <body>
  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <p><a href="#">over me!</a></p>
 </body>
</html>

Related Tutorials