Text Decoration

The Art of Embellishment

With the power of CSS, you become a true artisan of design. Whether it’s underlining, overlining, or the dramatic strikethrough, you add the final flourish to your text, like a master jeweler polishing their latest creation. Got a word you’ve fallen out of love with? No worries — just strike it out with line-through. But why stop at a simple line? Infuse your decorations with color — perhaps a gentle coral hue or something a bit bolder.

And the best part? CSS shorthand lets you define all these details in one precise stroke, like an artist completing a masterpiece with a single, elegant brushstroke.

Let’s Keep Going

Underline
Overline

Strikethrough
CSS Shorthand

The Final Touch for Your Text

Underlined, Struck Through, or Brilliantly Embellished — Make It Special!

Underline

A Touch of Elegance

An underline is like a delicate ribbon that adds a refined touch to your text. Often seen gracing links, it highlights important words without being too obtrusive.

h1 {
    text-decoration: underline;
}

Underlines work wonderfully for links or other key text elements, lending them subtle prominence without stealing the spotlight.

Overline

Protection and Emphasis

An overline is like a gentle roof resting above your text, offering it an added layer of protection while giving your words a touch of significance.

h1 {
   text-decoration: overline;
}

Overlines can also be used to highlight text, lending it prominence and a sense of importance.

Strikethrough

Crossing Out and Letting Go

A strikethrough is like a bold, decisive rejection. Simply cross it out, and it’s done. Perfect for making it clear that this part belongs to the past.

h1 {
    text-decoration: line-through;
}

Strikethroughs can also be used to emphasize text with incorrect or outdated information.

CSS Shorthand

Long story short

Why wrestle with lengthy, complex spells when you can handle it all in one graceful stroke? With a CSS shorthand, you combine all your text-decoration values into a single, precise statement. Instead of painstakingly setting each property individually, you wield one short, magical brushstroke and voilà – your text is adorned, embellished, and ready to take center stage.

h1 {
    text-decoration-line: line-through;
    text-decoration-color: coral;
    text-decoration-style: dotted;
    text-decoration-thickness: 4px;
}

Shorthand

h1 {
    text-decoration: line-through coral dotted 4px;
}

In this lesson, you have learned…

How to use text-decoration: underline to underline text, highlighting it or styling classic links.
Why text-decoration: overline creates an overline that gives text a special emphasis.
How to use text-decoration: line-through to strike through text, making outdated or removed content visible.
Why the shorthand for text-decoration is practical for combining line, color, style, and thickness in a single statement.
How to creatively use text decorations to add structure, clarity, and visual refinement to your design.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Adornments of the Runes

In the deepest corners of Greenwood Hollow lie runes adorned with mystical decorations, as if they’re whispering something important – but only if you look closely. To unlock their secrets, you must master the art of embellishing text with decorative lines and strokes. With CSS, you can enhance these runes with underlines, strikethroughs, or floating accents, transforming the symbols into something entirely new and meaningful.

Your Task: Applying Text Decorations

Basic Text Decorations (text-decoration-line):
- Assign the appropriate values to the .underline, .overline, and .line-through classes.
Style, Thickness, and Color of Decorations:
- For the .custom-decoration class:
- Set text-decoration-line: underline.
- Choose a style (text-decoration-style) like dotted or dashed.
- Use a thickness (text-decoration-thickness) of 2px.
- Add a color (text-decoration-color) like blue.
Summary with Shorthand (text-decoration):
- Combine all properties in a shorthand declaration, e.g.: text-decoration: underline dotted 2px blue;

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

.overline {
    text-decoration: overline purple solid 4px;
}

.underline {
    text-decoration: underline purple solid 2px;
}

.line-through {
    text-decoration: line-through purple solid 2px;
}

.custom-decoration {
    text-decoration: underline purple dotted 4px;
}

Let’s Keep Going