UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.
h3 {
text-decoration: underline;
}Values
none: no line is drawn, and any existing decoration is removed.underline: draws a 1px line across the text at its baseline.line-through: draws a 1px line across the text at its “middle” point.overline: draws a 1px line across the text, directly above its “top” point.inherit: inherits the decoration of the parent.
The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to “blink” by rapidly toggling it between 0% and 100% opacity.
Demo
Usage Notes
You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:
p {
text-decoration: overline underline line-through;
}By default, the line or lines inherit the color of the text as set by its color property. You can change this in browsers that support the text-decoration-color property or the three-value shorthand property.
text-decoration as a Shorthand Property
text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:
.fancy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
/* can be shortened to */
text-decoration: underline wavy red;
}Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.
Browser support
All browsers support the CSS2.1 “longhand” property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 118 | 119 | No | 115 | TP |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 115 | 17* |
More Information
text-decorationas a shorthand property in the W3C spec CSS Text Decoration Module Level 3 CRtext-decorationat MDN
Related
text-decoration-color
.element { text-decoration-color: orange; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
please tell me how to Disable right click to several text only
how to change the style of the underline?
i mean change the underline color, size, etc.
thanks..
Doesn’t even work in Canary 36. The -moz- equivalent does work in Firefox.
How to apply this property in Chrome then?
I’m confused. The article says this is only supported in FF, but then in the table below it says that it “works” across all major browsers. Are you giving me false hope here?
My experience is that text-decoration-style and text-decoration-color only work in FF and only with the -moz prefix.
I would love to be able to use this, because using border-bottom can be quirky – and I can’t believe this wasn’t addressed in CSS2 much less CSS3.
Turns out in Chrome (26+, iirc) you need to enable an experimental features flag. Users aren’t going to do that even if you ask nicely. So Chrome, for most intents and purposes, does NOT support this feature yet.
It’s technically in the codebase, and Chrome can technically support it, but virtually noone is going to see it working.
Same story for Opera, IE, Safari, Android, iOS, Dolphin, UC Browser, BlackBerry, WP8. Basically all browsers except (desktop?) Firefox don’t support text-decoration-style.
That situation looks to be changing slowly. Safari 8 (in the Yosemite developer preview) now has partial support for it: the
doubleandwavyoptions render (the latter is ugly, though), and thetext-decoration-colorproperty is supported as well.Chrome don’t support text-decoration-style.,,… but Firefox support.. Please help me for Chrome Browser…
By using inline-table and table-caption, we can force the proper positioning of a pseudo-element that allows proper scaling.
My explanation on StackOverflow
text-decoration specifications are still under development (http://www.w3.org/TR/css-text-decor-3/). everything with those subproperties is experimental. if you need another color for your underline use an additional span element.
Thank You – Not bad – I see myself using this…
In webkit text-decoration-color doesn’t work.. what shame ! I always that If something works anywhere else it must work in webkit
Any idea how to change the thickness of wavy underline
‘text-decoration: none’ style property working well in IE, but in Supported Browser list ‘IE’ and ‘Edge’ marked as not supported. Is there any specific reason for this.
What a text decoration ;)
I liked text-decoration: red underline overline wavy;. It’s really look awesome.