AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
The text-decoration-style
property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration
applied.
a {
text-decoration-style: solid;
}
Values
solid
: the default. Decoration is a single solid line.double
: Decoration is a pair of solid lines.dotted
: Decoration is a dotted line.dashed
: Decoration is a dashed line.wavy
: Decoration is a wavy line.
Demo
At the time of this writing, text-decoration-style
is only officially supported in Firefox. It will also work in Chrome browsers with the experimental web platform features flag enabled.
See the Pen text-decoration-style by CSS-Tricks (@css-tricks) on CodePen.
Shorthand
In browsers that support text-decoration-style
and text-decoration-color
you can add a decoration style to a text-decoration
shorthand property:
.underlined {
text-decoration: underline dotted 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.
Related
More Information
Browser Support
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
31 * | None | 6 † | None | None | None | None |
* only with experimental web platform features flag enabled
† Firefox 6+ with -moz
prefix, 36+ unprefixed.
Nice browser support… …NOT!
Can’t wait until they support all of it. Pretty neat new features!!!
Yeowch. Is there any reason this isn’t supported as well as it should be?