Definition and Usage
The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.
Underline and overline decorations are positioned under the text, line-through over it.
Note: CSS Text Decoration Level 3 transformed this property as a shorthand for the three new text-decoration-color, text-decoration-line, and text-decoration-style CSS properties. Like for any other shorthand property, it means that it resets their value to their default if not explicitely set in the shorthand.
- Initialthe concatenation of the initial values of its longhand properties:
- text-decoration-color: currentColor
- text-decoration-style: solid
- text-decoration-line: none
- Applies toall elements
- Inheritedno
- Mediavisual
- Computed Valueas each of the properties of the shorthand:
- text-decoration-line: as specified
- text-decoration-style: as specified
- text-decoration-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- Animatableas each of the properties of the shorthand:
- text-decoration-color: yes, as a color
- text-decoration-style: no
- text-decoration-line: no
- Canonical orderorder of appearance in the formal grammar of the values
Syntax
Formal syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
Values
Accepts one or more whitespace separated values:
none
- Produces no text decoration.
underline
- Each line of text is underlined.
overline
- Each line of text has a line above it.
line-through
- Each line of text has a line through the middle.
blink
- Is a keyword making the text slowlyblinks. Though valid, the effect is deprecated and the specification allows browser to ignore this value.
Examples
02 |
text-decoration : underline ; |
05 |
text-decoration : overline ; |
08 |
text-decoration : line-through ; |
11 |
text-decoration : blink ; |
14 |
text-decoration : none ; |
17 |
text-decoration : underline overline ; |
1 |
< h1 class = "under" >Underlined Header</ h1 > |
2 |
< p class = "line" >If you want to strike out text, use line-through.</ p > |
3 |
< p class = "blink" >This text might blink for you - if you use Explorer, it will not.</ p > |
4 |
< h1 class = "over" >and now an overlined header.</ h1 > |
5 |
< p >This < a class = "none" href = "textdecoration.html" >link will not be underlined</ a > , as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</ p > |
6 |
< p class = "underover" >This text has both underline and overline.</ p > |
Compatibility
Desktop browsers
Feature |
Firefox (Gecko) |
Chrome |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 (1.7 or earlier) |
1.0 |
3.0 |
3.5 |
1.0 |
blink value |
1.0 (1.7 or earlier)
Effect removed in 23.0 (23.0) |
(Yes) but without effect |
(Yes) but without effect |
4.0
Effect removed in 15.0 |
(Yes) but without effect |
Shorthand property |
6.0 (6.0) |
Not supported |
Not supported |
Not supported |
Not supported |
Mobile browsers
Feature |
Firefox Mobile (Gecko) |
Android |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
1.0 (1.0) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
blink value |
1.0 (1.7 or earlier)
Effect removed in 23.0 (23.0) |
(Yes) but without effect |
(Yes) but without effect |
4.0
Effect removed in 15.0 |
(Yes) but without effect |
Shorthand property |
6.0 (6.0) |
NA |
NA |
NA |
NA |