The CSS text-decoration
shorthand property allows you to add and style decorative lines on text.
Jump ahead:
The property’s syntax is as follows:
text-decoration: line | style | color | thickness
Demo
See the Pen
CSS Text Decoration Example by Solomon Eseme (@kaperskyguru)
on CodePen.
Component properties
The CSS text-decoration
shorthand is made up of four component properties. Consider the following example:
p { text-decoration: underline solid red 0.1em; } // explodes to: p { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 0.1em }
We explore each component property in depth below.
text-decoration-line
Sets the line style for the text-decoration
.
Values
underline
: Displays a line under the textline-through
: Strikes a line through the textoverline
: Displays a line over the textblink
: The text continuously alternates between visible and invisible — in other words, it blinks. This value has been deprecated in favor of CSS animationsnone
: Produces no line
Usage
p { text-decoration-line: underline | line-through | overline | blink | none }
text-decoration-style
Sets the style of the line to be displayed on the text.
Values
solid
: Draws a solid linedouble
: Draws a double linedotted
: Draws a dotted linedashed
: Draws a dashed linewavy
: Draws a wavy line
Usage
p { text-decoration-style: solid | double | dotted | dashed | wavy; }
text-decoration-color
Sets the color of the line to be displayed on the text.
Values
As with all CSS colors, values can be supplied by keyword, hex code, RGB/RGBA values, or HSL/HSLA values.
Usage
p { text-decoration-color: currentcolor | red | #00ff00 | rgba(255, 128, 128, 0.5) | transparent; }
text-decoration-thickness
Sets the stroke thickness of the line drawn on the text.
N.B.,
text-decoration-thickness
is currently supported only in the latest versions of Firefox and Safari.
Values
auto
: Allows the browser to chooses an appropriate width for the text decoration linefrom-font
: Allows the thickness of the line to be determined by the font file for the text. If no information on thickness is supplied in the font file, the value defaults toauto
length
: Allows the developer to specify any length value (e.g.,1px
,2em
, etc.)percentage
: Allows the developer to specify a percentage value for the line thickness
Usage
p { text-decoration-thickness: auto | from-font | 0.2em | 3px | 10%; }
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.