Lesson 15: Mastering Text Decoration

Understanding Text Decoration

Text decoration in CSS allows you to add visual elements to your text, such as underlines, overlines, and line-throughs. These decorations can enhance readability, indicate importance, or create visual hierarchy in your content.

None: Removes any text decorations. Commonly used to remove default browser styles.

Underline: Adds a line below text. Useful for links, emphasis, and section headers.

Overline: Adds a line above text. Creates visual interest for headings and special elements.

Line-through: Adds a line through the middle of text. Indicates deleted or deprecated content.

Text Decoration Examples

Underline

This text has an underline decoration

text-decoration: underline;

Overline

This text has an overline decoration

text-decoration: overline;

Line-through

This text has a line-through decoration

text-decoration: line-through;

Combined

Underline and overline combined

text-decoration: underline overline;

CSS Text-Decoration Syntax

/* Basic text decoration */
.link {
  text-decoration: underline;
}

.old-price {
  text-decoration: line-through;
}

.special-heading {
  text-decoration: overline;
}

/* Removing default underlines */
a {
  text-decoration: none;
}

/* Combining multiple decorations */
.double-decoration {
  text-decoration: underline overline;
}

/* Using with pseudo-elements */
h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: var(--primary);
  margin: 5px auto;
}

Advanced Decoration Properties

Modern CSS provides additional properties to customize the appearance of text decorations:

text-decoration-color

Sets the color of the decoration line

Colored underline example

text-decoration-style

Defines the style of the line (solid, double, dotted, dashed, wavy)

Wavy underline example

text-decoration-thickness

Sets the thickness of the decoration line

Thick underline example

text-underline-offset

Sets the offset distance of an underline from its original position

Offset underline example

Advanced Text-Decoration Syntax

/* Customizing decoration appearance */
.custom-underline {
  text-decoration: underline;
  text-decoration-color: #ff9800;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Shorthand version */
.shorthand-decoration {
  text-decoration: underline wavy #ff9800 2px;
}

/* Using with transitions */
.animated-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}

.animated-link:hover {
  text-decoration-color: var(--primary);
}

Interactive Decoration Demo

Experiment with different text decoration options and see the results in real-time:

Decoration Type:

Color:

Style:

Thickness: 1px

Offset: 0px

Customize your text decoration

.preview {
  text-decoration: underline;
}

Real-World Use Cases

Link Styling

Hover over this link to see the effect

Create distinctive link styles with custom underlines that stand out from regular text.

Price Display

$49.99 $39.99

Use line-through to show original prices and discounts in e-commerce interfaces.

Section Headings

Best Practices

Follow these guidelines for effective use of text decorations:

Use Underlines Sparingly: Reserve underlines primarily for links to avoid confusion with interactive elements.

Ensure Sufficient Contrast: Make sure decoration lines have enough contrast with both text and background colors.

Consider Accessibility: Avoid using text decoration as the only visual indicator for important information.

Combine with Other Styles: Use text decoration in combination with color, weight, or spacing for better emphasis.

Text Decoration vs. Border

Feature Text Decoration Border Best For Positioning Follows text baseline Around element box Text decorations should follow text Multiple Lines Applies to each line Around entire element Multi-line text needs per-line decoration Animation Limited animation support Full animation support Animated effects work better with borders Customization Modern properties allow good customization Highly customizable Complex designs may require borders

Creative Decoration Techniques

/* Gradient underline */
.gradient-underline {
  background: linear-gradient(to right, transparent 0%, #ff9800 100%) bottom no-repeat;
  background-size: 100% 2px;
  padding-bottom: 3px;
}

/* Animated underline */
.animated-underline {
  position: relative;
  text-decoration: none;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s;
}

.animated-underline:hover::after {
  width: 100%;
}

/* Custom line-through */
.custom-line-through {
  position: relative;
}

.custom-line-through::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--error);
  transform: translateY(-50%);
}

Common Mistakes to Avoid

Be aware of these pitfalls when using text decorations:

Overusing Underlines

Underlining every important word makes content look cluttered and reduces the effectiveness of underlines for actual links.

Solution: Use underlines primarily for links and sparingly for other emphasis.

Poor Color Contrast

This underline has insufficient contrast against the background

Solution: Ensure text decorations have sufficient contrast with both text and background.

Inconsistent Link Styling

Regular text without underline and with underline creates confusion.

Solution: Maintain consistent styling for all interactive elements.

Next Steps

Now that you understand text decorations, continue to the next lesson to learn about font styles and advanced typography techniques.

Previous Lesson Next Lesson: Font-Style