码农教程 - 一技在手,衣食无忧! tools

目录

CSS text-decoration Property

❮ Previous Complete CSS Reference Next ❯

Example

Set different text decorations for <h1>, <h2>, and <h3> elements:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

  • text-decoration-line (required)
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness

Show demo ❯

Default value: none currentColor solid auto
Inherited: no
Animatable: no, see individual properties. Read about animatable
Version: CSS1, renewed in CSS3
JavaScript syntax: object.style.textDecoration="underline" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-decoration 1.0 3.0 1.0 1.0 3.5

CSS Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;

Property Values

Value Description Demo
text-decoration-line Sets the kind of text decoration to use (like underline, overline, line-through) Demo ❯
text-decoration-color Sets the color of the text decoration Demo ❯
text-decoration-style Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) Demo ❯
text-decoration-thickness Sets the thickness of the decoration line
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Add more text decoration:

h1 {
  text-decoration: underline overline dotted red;
}

h2 {
  text-decoration: underline wavy blue 5px;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Text Decoration

HTML DOM reference: textDecoration property


❮ Previous Complete CSS Reference Next ❯