menu
text-decoration is the CSS property that we use to add line decorations on the text element with colours and styles, or to remove any of them. This property is actually a shorthand for the following CSS properties: - `text-decoration-line` (required) - `text-decoration-color` - `text-decoration-style` - `text-decoration-thickness`
taught by Tina May
You can make any text element to have an underline, which is a valid value for text-decoration-line property:
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
When you create a link, by default it has an underline. If you want to remove that underline, you can override it with text-decoration.
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can add a strikethrough to any text element, with a value that’s valid for text-decoration-line property:
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Once you add a line decoration (underline or strikethrough) to any text element, you can apply color to it, using HEX or RGB color code:
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can control the thickness of your line decoration (underline or strikethrough) either with or without color settings:
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
There are a few styles you can add to your line decorations:
text-decoration:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change the text decoration of the heading*/
h2 { text-decoration: underline #1A4895; }
/* Change the text decoration of the paragraph*/
p { text-decoration: line-through #F9BA4E 2px wavy; }
Let’s change the decorations of each of the following text elements.
Below we’ve put a heading and a paragraph which you can underline or strike through while adding visual effects to it. Otherwise, you can also remove the text decorations entirely.
Try these (or anything else!):
Copyright 2023