HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

text-decoration

Description

The text-decoration property for CSS is shorthand for text-decoration-line, text-decoration-thickness, text-decoration-style, and text-decoration-color.

Syntax

CSS

text-decoration: value;

JS

object.style.textDecoration = "value";

Values

<'text-decoration'> = <'text-decoration-line'> || <'text-decoration-thickness'> || <'text-decoration-style'> || <'text-decoration-color'>
<'text-decoration-line'> = none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
none

Neither produces nor inhibits text decoration.

underline

Each line of text is underlined.

overline

Each line of text has a line over it.

line-through

Each line of text has a line through the middle.

blink

The text blinks.

spelling-error

Indicates the type of text decoration used by the user agent to highlight spelling mistakes.

grammar-error

Indicates the type of text decoration used by the user agent to highlight grammar mistakes.

<'text-decoration-thickness'> = auto | from-font | <length> | <percentage>
auto

Automatically specified by the user agent.

from-font

If the first available font has metrics indicating a preferred underline width, use that width, otherwise behaves as auto.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<'text-decoration-style'> = solid | double | dotted | dashed | wavy
solid

Indicates a solid line.

double

Indicates a double line.

dotted

Indicates a dotted line.

dashed

Indicates a dashed line.

wavy

Indicates a wavy line.

<'text-decoration-color'> = <color>
<color>

Specifies the color using a keyword or a numerical specification.

Examples

1 · text-decoration-line · none

2 · text-decoration-line · underline

3 · text-decoration-line · overline

4 · text-decoration-line · line-through

5 · text-decoration-line · blink

6 · text-decoration-line · spelling-error

7 · text-decoration-line · grammar-error

8 · text-decoration-line · JS

9 · text-decoration-thickness · auto

10 · text-decoration-thickness · from-font

11 · text-decoration-thickness · length

12 · text-decoration-thickness · percentage

13 · text-decoration-thickness · JS

14 · text-decoration-style · solid

15 · text-decoration-style · double

16 · text-decoration-style · dotted

17 · text-decoration-style · dashed

18 · text-decoration-style · wavy

19 · text-decoration-style · JS

20 · text-decoration-color · color

21 · text-decoration-color · JS