text-decoration-line - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-decoration-line

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

Description

The text-decoration-line CSS property sets what kind of line decorations are added to the element.

The following table summarizes the text-decoration-line Property.

Item Value
Default value: none
Applies to:All elements. It also applies to ::first-letter and ::first-line.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


text-decoration-line:     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 decoration. This is default value.
underlineunderlined.
overline text has a line above it.
line-through text has a line through the middle.
blinkMakes the text blink.
initial Sets this property to its default value.
inherit take the value of its parent element text-decoration-line property.

The example below shows the text-decoration-line property.

Example

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 text-decoration-line Property</title>
  <style type="text/css">
  p {<!-- ww w. ja va  2s  .  co m-->
    -moz-text-decoration-line: underline; /* Firefox */
    text-decoration-line: underline; /* Standard syntax */
  }
  p.multiple {
    -moz-text-decoration-line: underline overline; /* Firefox */
    text-decoration-line: underline overline; /* Standard syntax */
  }
</style>
 </head>
 <body>
  <p>This is some decoration text.</p>
  <p class="multiple">This text has multiple decorations.</p>
 </body>
</html>

Related Tutorials