The text-decoration property is a shorthand for setting the appearance of decorative lines on text, such as underlines, overlines, and strikethroughs.
.element {
text-decoration: underline dashed blue 2px;
}Behind the scenes, text-decoration combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single shorthand property.
.fancy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
/* can be shortened to */
text-decoration: underline wavy red 2px;
}Values
text-decoration: underline;
text-decoration: overline #e43 5px;
text-decoration: line-through wavy;
text-decoration: none;
/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;Demo
Browser support
The text-decoration property is defined in the CSS Text Decoration Module Level 4 specification and is widely supported across all browsers.
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.
http://codepen.io/pohuski/pen/vEzxPj
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.