Tag: underline

Mastering CSS `text-decoration`: A Beginner’s Guide to Text Styling
In the world of web design, the way text looks is just as important as the words themselves. Think about it: a well-written article can lose its impact if the text is hard to read or visually unappealing. That’s where CSS’s text-decoration property comes in. It’s your go-to tool for adding those essential finishing touches to your text, making it stand out, conveying meaning, and improving readability. Whether you want to underline links, strike through outdated information, or simply add a stylish touch to your headings, text-decoration is the key. In this tutorial, we’ll dive deep into the text-decoration property, exploring its various values and how to use them effectively.

Understanding the Basics: What is `text-decoration`?

The text-decoration CSS property is used to add decorative lines to text. It’s a shorthand property, meaning it combines multiple related properties into one. This makes your code cleaner and easier to read. The most common uses for text-decoration are underlining, overlining, and strikethrough. It can also be used to remove decorations, which is particularly useful for overriding default browser styles.

The Core Values

The text-decoration property accepts several values. Let’s look at the most important ones:
- none: This is the default value. It removes all text decorations.
- underline: Adds a line below the text. This is commonly used for links.
- overline: Adds a line above the text.
- line-through: Adds a line through the center of the text. Often used to indicate deleted or outdated content.
These values can be combined with other related properties to customize the appearance of the decorations. We’ll explore these customizations later.

Getting Started: Applying `text-decoration`

Applying text-decoration is straightforward. You can apply it to any HTML element that contains text, such as paragraphs, headings, and links. Here’s how:
```
p {
  text-decoration: underline; /* Underlines all paragraphs */
}

a {
  text-decoration: none; /* Removes underlines from all links */
}

h2 {
  text-decoration: overline; /* Adds an overline to all h2 headings */
}
```
In this example, we’ve styled paragraphs with an underline, removed the underline from links (a common practice to create a cleaner design), and added an overline to heading elements. Remember to include this CSS code within your stylesheet (e.g., a .css file) or within <style> tags in the <head> of your HTML document.

Example in HTML

Here’s a simple HTML example to demonstrate:
```
<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>
  <style>
    p {
      text-decoration: underline;
    }
    a {
      text-decoration: none;
    }
    h2 {
      text-decoration: overline;
    }
  </style>
</head>
<body>
  <h2>This is a Heading</h2>
  <p>This is a paragraph with an underline.</p>
  <a href="#">This is a link without an underline.</a>
</body>
</html>
```
When you view this HTML file in your browser, you’ll see the effects of the text-decoration styles.

Advanced Customization: Beyond the Basics

While the basic values of text-decoration are useful, you can further customize the appearance of your text decorations using related properties. These properties allow you to control the color, style (e.g., dashed, dotted), and thickness of the lines.

text-decoration-color

This property sets the color of the text decoration. By default, it inherits the text color. However, you can override this to create decorative lines that stand out.
```
p {
  text-decoration: underline;
  text-decoration-color: red; /* Underline will be red */
}
```
In this case, the underline of all paragraphs will be red, regardless of the text color.

text-decoration-style

This property defines the style of the line. You can choose from the following values:
- solid: A single, solid line (default).
- double: A double line.
- dotted: A dotted line.
- dashed: A dashed line.
- wavy: A wavy line.
```
p {
  text-decoration: underline;
  text-decoration-style: dashed; /* Underline will be dashed */
}
```
This example will give your paragraphs a dashed underline.

text-decoration-line

This property specifies what kind of text decoration to use (underline, overline, line-through, or none). It is a more detailed way of setting the basic values that we mentioned before.
```
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: blue;
}
```
This will create a wavy, blue underline.

Shorthand: The Power of Conciseness

As mentioned earlier, text-decoration is a shorthand property. This means you can combine text-decoration-line, text-decoration-style, and text-decoration-color into a single declaration. This makes your code more concise and readable.
```
p {
  text-decoration: underline dashed red; /* Equivalent to the previous examples */
}
```
In this example, we’re setting the line to be underlined, dashed, and red all in one line of code. The order matters: the first value is for text-decoration-line, the second for text-decoration-style, and the third for text-decoration-color.

Common Mistakes and How to Fix Them

Even experienced developers sometimes make mistakes. Here are a few common pitfalls when working with text-decoration and how to avoid them:

Mistake: Forgetting the none Value

One of the most frequent issues is forgetting to remove the default underline from links. This can lead to a cluttered and unprofessional design. The fix is simple: always set text-decoration: none; for your links unless you specifically want an underline.

Mistake: Inconsistent Styling

Applying text decorations inconsistently across your website can create a confusing user experience. Make sure your styling is uniform throughout your site. Create a style guide or a set of rules to ensure consistency.

Mistake: Overusing Decorations

Too much decoration can be distracting and make your content harder to read. Use text-decoration sparingly. Underlines, for example, should primarily be used for links. Overlining and strikethroughs should be reserved for specific purposes, such as indicating edits or deletions.

Mistake: Not Considering Accessibility

Be mindful of accessibility. Ensure sufficient contrast between the decoration color and the background to make it visible for users with visual impairments. Avoid using decorations that might be confused with other UI elements.

Step-by-Step Instructions: Styling a Navigation Menu

Let’s walk through a practical example: styling a navigation menu. We’ll remove the default underlines from the links and add a hover effect to emphasize the active link.
1. HTML Structure: Start with a basic HTML navigation menu, using an unordered list (`<ul>`) and list items (`<li>`) for the links.
```
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
```
1. Basic CSS: Start by removing the underlines and styling the links.
```
nav ul {
  list-style: none; /* Remove bullet points */
  padding: 0;      /* Remove default padding */
  margin: 0;       /* Remove default margin */
  display: flex;   /* Use flexbox for layout */
}

nav li {
  margin-right: 20px; /* Add spacing between items */
}

nav a {
  text-decoration: none; /* Remove underlines */
  color: #333;           /* Set link color */
  font-weight: bold;     /* Make links bold */
}
```
1. Hover Effect: Add a hover effect to underline the active link.
```
nav a:hover {
  text-decoration: underline;
  color: #007bff; /* Change color on hover */
}
```
1. Active State (Optional): You can also add an active state to the currently selected link.
```
nav a.active {
  text-decoration: underline;
  color: #007bff; /* Highlight the active link */
}
```
This example shows how to use text-decoration to improve the visual appeal and usability of a navigation menu. You can adapt these steps to other elements on your website as needed.

Key Takeaways
- The text-decoration property controls the decorative lines of text.
- Key values include none, underline, overline, and line-through.
- Use text-decoration-color and text-decoration-style for customization.
- The shorthand property allows for concise code.
- Avoid common mistakes like forgetting none or overusing decorations.
FAQ

1. Can I animate text-decoration?

Yes, you can animate the text-decoration property using CSS transitions or animations. For example, you can create a smooth effect where the underline appears on hover.
```
nav a {
  text-decoration: none;
  transition: text-decoration 0.3s ease; /* Add transition */
}

nav a:hover {
  text-decoration: underline;
}
```
2. How can I remove underlines from all links on my website quickly?

You can use a CSS rule that targets all links globally:
```
a {
  text-decoration: none;
}
```
This will remove the default underlines from all <a> tags on your website.

3. How do I create a double underline?

You can create a double underline using the text-decoration-style property:
```
p {
  text-decoration: underline;
  text-decoration-style: double;
}
```
4. Is there a way to add a different decoration to only a portion of the text within an element?

Yes, you can achieve this by wrapping the specific text portion with a <span> element and applying the desired text-decoration to that span. For instance:
```
<p>This is a paragraph with <span style="text-decoration: line-through;">some deleted text</span>.</p>
```
5. How can I ensure my text decorations are accessible?

To ensure accessibility, consider these points:
- Use sufficient color contrast between the decoration and the background.
- Avoid excessive use of decorations that might distract users.
- Test your website with screen readers to verify that the decorations are announced correctly.
Following these guidelines will help ensure your website is accessible to everyone.

Mastering text-decoration is a fundamental step in becoming proficient in CSS. It allows you to control the visual presentation of your text, making your website more readable, engaging, and user-friendly. By understanding the different values, customization options, and common pitfalls, you can effectively use text-decoration to enhance the aesthetics and usability of your web projects. From simple underlines to more complex effects, text-decoration provides you with the power to shape how your text looks and feels, directly impacting how your audience perceives and interacts with your content. So, go forth, experiment, and make your text shine!
February 23, 2026
Mastering CSS `text-decoration`: A Beginner’s Guide to Styling Text
In the vast world of web development, the ability to style text effectively is paramount. Text is the primary means of communication on the web, and how it appears significantly impacts user experience and readability. One of the most fundamental aspects of text styling is controlling its decoration. CSS provides the `text-decoration` property, offering a simple yet powerful way to add visual flair and clarity to your text. This guide will delve into the intricacies of `text-decoration`, providing a comprehensive understanding for beginners and intermediate developers alike.

Why `text-decoration` Matters

Imagine a website overflowing with text. Without proper styling, it can quickly become a jumbled mess, difficult to read and navigate. `text-decoration` addresses this challenge by allowing you to:
- Highlight key information: Underlining, overlining, or striking through text can draw attention to important words or phrases.
- Improve readability: Using underlines for links is a standard convention that users instantly recognize.
- Enhance visual appeal: Subtle decorations can add a touch of personality and style to your website.
- Convey meaning: Striking through text can indicate that something is outdated or no longer relevant.
Mastering `text-decoration` is not just about aesthetics; it’s about creating a better user experience and communicating your message effectively.

Understanding the Basics: The `text-decoration` Property

The `text-decoration` property in CSS is your primary tool for controlling text decorations. It accepts several values, each offering a different type of decoration. Let’s explore the most common ones:

`none`

This is the default value. It removes any existing text decorations. It’s often used to remove underlines from links when you want a cleaner look.
```
a {
  text-decoration: none;
}
```
`underline`

Adds a line beneath the text. This is commonly used for links, but can be applied to any text element.
```
p {
  text-decoration: underline;
}
```
`overline`

Adds a line above the text. This is less commonly used than `underline`, but can be effective for highlighting headings or specific pieces of text.
```
h2 {
  text-decoration: overline;
}
```
`line-through`

Draws a line through the center of the text. Often used to indicate deleted or outdated content, or for displaying prices with discounts.
```
.strikethrough {
  text-decoration: line-through;
}
```
`blink`

This value causes the text to blink. However, it’s generally discouraged due to its potential to be distracting and annoying for users. It’s also been deprecated in many browsers and may not work consistently.
```
/* Avoid using blink */
.blink {
  text-decoration: blink; /* Not recommended */
}
```
Advanced `text-decoration` Properties

Beyond the basic values, CSS offers more control over the appearance of the text decoration through the following properties:

`text-decoration-line`

This property is used to specify the type of decoration line. It accepts the same values as `text-decoration` (`none`, `underline`, `overline`, `line-through`, `blink`). It is often used in conjunction with other `text-decoration` properties.
```
p {
  text-decoration-line: underline;
}
```
`text-decoration-color`

This property sets the color of the decoration line. You can use any valid CSS color value (e.g., color names, hex codes, RGB, RGBA).
```
p {
  text-decoration-line: underline;
  text-decoration-color: red;
}
```
`text-decoration-style`

This property controls the style of the decoration line. It accepts the following values:
- `solid`: A single, solid line (default).
- `double`: A double line.
- `dotted`: A dotted line.
- `dashed`: A dashed line.
- `wavy`: A wavy line.
```
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
```
Shorthand: The `text-decoration` Property (Again!)

You can actually use the `text-decoration` property as a shorthand for setting `text-decoration-line`, `text-decoration-color`, and `text-decoration-style` all at once. The order matters:
```
p {
  text-decoration: underline red wavy;
}
```
In this example, the text will have an underlined, red, wavy decoration. If you omit a value, the browser will use the default value for that property. For example:
```
p {
  text-decoration: underline red;
}
```
This will result in an underlined, red decoration with a solid line style (the default). If you only specify one value, it will be interpreted as the `text-decoration-line` value.

Step-by-Step Instructions: Applying `text-decoration`

Let’s walk through a practical example to solidify your understanding. We’ll create a simple HTML document and apply different `text-decoration` styles.

Step 1: HTML Structure

Create an HTML file (e.g., `index.html`) with the following content:
```
  
  
  <title>Text Decoration Example</title>
  


  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <p class="underline-example">This text is underlined.</p>
  <p class="overline-example">This text has an overline.</p>
  <p class="line-through-example">This text is crossed out.</p>
  <a href="#">This is a link</a>
```
Step 2: CSS Styling

Create a CSS file (e.g., `style.css`) and add the following styles:
```
/* General styles */
body {
  font-family: sans-serif;
}

/* Underline example */
.underline-example {
  text-decoration: underline;
}

/* Overline example */
.overline-example {
  text-decoration: overline;
}

/* Line-through example */
.line-through-example {
  text-decoration: line-through;
}

/* Link styling */
a {
  text-decoration: none; /* Remove default underline */
  color: blue; /* Set link color */
}

a:hover {
  text-decoration: underline; /* Add underline on hover */
}
```
Step 3: Viewing the Result

Open `index.html` in your web browser. You should see the different text decorations applied to the corresponding elements. The link should initially appear without an underline, but gain one when you hover over it.

Common Mistakes and How to Fix Them

Here are some common pitfalls when working with `text-decoration` and how to avoid them:

Mistake 1: Forgetting to remove default underlines from links

Links have an underline by default. If you want a different style, you *must* remove the default underline using `text-decoration: none;` and then apply your desired decoration.
```
a {
  text-decoration: none; /* Remove default underline */
}
```
Mistake 2: Using `blink` (or other deprecated features)

Avoid using `blink`. It’s distracting and may not work consistently across all browsers. Focus on more modern and user-friendly styling options.

Mistake 3: Overusing Decorations

Too much decoration can make your website look cluttered and unprofessional. Use `text-decoration` sparingly and strategically to highlight key information or enhance readability. Consider your audience and the overall design aesthetic.

Mistake 4: Not Considering Color Contrast

When using decorations, ensure sufficient color contrast between the text, the decoration, and the background. Poor color contrast can make text difficult to read, especially for users with visual impairments. Use a color contrast checker to verify your color choices.

Mistake 5: Applying Decorations Inconsistently

Maintain consistency in your use of text decorations throughout your website. For example, if you use underlines for links, stick with that convention. Inconsistency can confuse users and make your site look less polished. Use a style guide to document your design choices.

Key Takeaways
- `text-decoration` is essential for controlling text appearance.
- The `text-decoration` property offers `none`, `underline`, `overline`, `line-through`, and (less recommended) `blink`.
- Use `text-decoration-line`, `text-decoration-color`, and `text-decoration-style` for more granular control.
- The shorthand `text-decoration` property combines all three.
- Remove underlines from links with `text-decoration: none;` if desired.
- Use decorations strategically and consistently for the best user experience.
FAQ

1. Can I animate `text-decoration`?

Yes, you can animate the `text-decoration-color` and `text-decoration-style` properties using CSS transitions or animations. However, animating the `text-decoration-line` itself (e.g., from `none` to `underline`) is not directly supported and might require workarounds using pseudo-elements or other techniques.

2. How do I create a double underline?

You can achieve a double underline using `text-decoration-style: double;`. Alternatively, you could use a background image or a box-shadow to create a more custom underline effect, but this can be more complex to implement.

3. Can I apply multiple decorations to the same text?

While you can use multiple values within the `text-decoration` shorthand (e.g., `text-decoration: underline red wavy;`), you can only apply one instance of each type of decoration line (`underline`, `overline`, `line-through`). Applying multiple lines of the same type (e.g., two underlines) requires more advanced techniques, such as using pseudo-elements.

4. Is `text-decoration` inherited?

Yes, the `text-decoration` property is inherited. This means that if you set `text-decoration` on a parent element, its child elements will inherit that decoration unless overridden. However, the `text-decoration` properties applied to the parent are not inherited, only the value of the `text-decoration` property.

5. How can I ensure my decorations are accessible?

When using `text-decoration`, always consider accessibility. Ensure sufficient color contrast between the text, decoration, and background. Avoid using `blink`. Provide alternative ways to convey information for users who may not be able to see the decorations (e.g., using ARIA attributes). Test your website with assistive technologies like screen readers to ensure a good user experience for everyone.

By understanding and applying the principles outlined in this guide, you can effectively use `text-decoration` to enhance the appearance and usability of your web projects. Remember to prioritize clarity, readability, and a consistent design aesthetic. Experiment with different styles, and most importantly, always keep the user experience in mind. The subtle details often make the biggest difference in creating a polished and engaging website.
February 22, 2026
Mastering CSS `text-decoration`: A Beginner’s Guide
Ever wondered how to underline text, add a stylish wavy line, or even remove underlines entirely? In the world of web design, the ability to control text appearance is crucial. CSS provides a powerful toolset for precisely this purpose, and one of the most fundamental aspects is the `text-decoration` property. This tutorial will guide you through everything you need to know about `text-decoration`, from its basic functionalities to advanced techniques, ensuring your text looks exactly as you envision it. We’ll explore various values, understand their application, and learn how to avoid common pitfalls. Get ready to elevate your web design skills!

Understanding the `text-decoration` Property

The `text-decoration` property in CSS is a shorthand property that allows you to add a decorative line to text. This includes underlines, overlines, and strikethroughs. It’s a fundamental property for enhancing the visual presentation of text and conveying specific meanings or emphasis. The property itself is straightforward, but understanding its different values and how they interact is essential for effective styling.

Basic Values

The `text-decoration` property accepts several key values. Let’s delve into each one:
- `none`: This is the default value. It removes any text decorations, which is often used to eliminate underlines on links.
- `underline`: Adds an underline to the text.
- `overline`: Adds a line above the text.
- `line-through`: Adds a line through the text, often used to indicate deleted content.
- `initial`: Sets the property to its default value.
- `inherit`: Inherits the property value from its parent element.
- `unset`: Resets the property to its inherited value if it inherits, or to its initial value if not.
These values provide the foundation for text decoration. They offer control over the presence and placement of lines relative to the text.

Syntax and Usage

The basic syntax for using the `text-decoration` property is simple:
```
selector {
  text-decoration: value;
}
```
Where `selector` is the HTML element you want to style, and `value` is one of the options described above. Let’s look at some examples:
```
<p>This is normal text.</p>
<p class="underline-text">This text is underlined.</p>
<p class="overline-text">This text has a line above it.</p>
<p class="line-through-text">This text is crossed out.</p>
<a href="#">This is a link.</a>
```
```
.underline-text {
  text-decoration: underline;
}

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

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

a {
  text-decoration: none; /* Removing underline from links */
}
```
In this example, we apply different decorations to paragraphs using CSS classes and remove the default underline from links. This demonstrates the fundamental usage of the `text-decoration` property.

Advanced `text-decoration` Techniques

While the basic values are useful, CSS offers more control through related properties. These advanced techniques provide finer control over the appearance of the text decorations.

`text-decoration-line`

The `text-decoration-line` property specifies what kind of line to use. Its values are similar to the `text-decoration` property but focus solely on the line type. It accepts values like `none`, `underline`, `overline`, and `line-through`. This property is part of the `text-decoration` shorthand and can be used on its own.
```
p {
  text-decoration-line: underline;
}
```
`text-decoration-color`

The `text-decoration-color` property sets the color of the text decoration line. This allows you to customize the color of underlines, overlines, and strikethroughs to match your design’s color scheme. You can use any valid CSS color value, such as color names, hex codes, RGB values, or RGBA values.
```
p.colored-underline {
  text-decoration-line: underline;
  text-decoration-color: red;
}
```
`text-decoration-style`

The `text-decoration-style` property defines the style of the text decoration line. This is where you can specify whether the line should be solid, dashed, dotted, wavy, or double. This adds a level of visual flair to your text decorations.
```
p.wavy-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.dashed-overline {
  text-decoration-line: overline;
  text-decoration-style: dashed;
}
```
Shorthand: `text-decoration`

The `text-decoration` property is a shorthand for `text-decoration-line`, `text-decoration-color`, and `text-decoration-style`. This allows you to set all three properties in a single line of CSS. The order of the values does not matter.
```
p.custom-decoration {
  text-decoration: underline wavy red;
}
```
In this example, we create an underlined, wavy, red line using the shorthand property.

Practical Examples and Use Cases

Let’s explore some practical examples to illustrate how to use `text-decoration` effectively in different scenarios.

Styling Links

One of the most common uses of `text-decoration` is styling links. By default, links have an underline. You can remove this underline and style the link in other ways.
```
a {
  text-decoration: none; /* Remove underline */
  color: blue; /* Change link color */
}

a:hover {
  text-decoration: underline; /* Add underline on hover */
}
```
In this example, we remove the default underline from all links, change their color to blue, and add an underline on hover to provide visual feedback.

Marking Deleted or Edited Content

The `line-through` value is perfect for indicating deleted or edited content. It provides a clear visual cue to the user that the text has been removed or revised.
```
<p>The price was <span class="deleted-price">$100</span>, now it's $75.</p>
```
```
.deleted-price {
  text-decoration: line-through;
  color: gray;
}
```
Here, we use `line-through` to visually indicate that the original price has been removed.

Creating Stylish Headings

You can use `overline` or `underline` with `text-decoration-style` to create interesting heading styles. This can add visual emphasis and make your headings stand out.
```
h2 {
  text-decoration-line: overline;
  text-decoration-style: dashed;
  text-decoration-color: purple;
}
```
This example creates a dashed purple line above the `h2` headings.

Adding Visual Interest to Text

The `wavy` style can add a unique visual flair to specific text elements, drawing attention to them.
```
.important-text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: orange;
}
```
This adds an underlined, wavy, orange line to the text with the class `important-text`.

Common Mistakes and How to Avoid Them

While `text-decoration` is straightforward, some common mistakes can lead to unexpected results. Being aware of these pitfalls can help you avoid frustration and create more polished designs.

Forgetting to Reset Link Styles

A common mistake is forgetting to remove the default underline from links. This can clash with your design if you’re aiming for a cleaner look.

Solution: Always set `text-decoration: none` for links in your base CSS or style sheet to remove the default underline.
```
a {
  text-decoration: none;
}
```
Overusing Decorations

Overusing text decorations can make your design look cluttered and unprofessional. Too many underlines, overlines, or strikethroughs can distract the user and reduce readability.

Solution: Use text decorations sparingly and strategically. Consider the overall design and whether the decoration adds value or detracts from the user experience.

Inconsistent Styling

Inconsistent styling across your website can create a confusing experience for users. Ensure that your text decorations are consistent throughout your site to maintain a cohesive look.

Solution: Create a style guide or a set of CSS rules to define how text decorations should be used throughout your site. This will help maintain consistency and make it easier to update your design in the future.

Confusing with `border-bottom` or `border-top`

Sometimes, developers might try to use `border-bottom` or `border-top` to achieve the effect of an underline or overline. While this can work, it’s not the correct approach, and can lead to issues with spacing and responsiveness.

Solution: Use `text-decoration` for underlines, overlines, and strikethroughs. Use `border-bottom` or `border-top` only for actual borders, such as those around a box or element.

Accessibility Considerations

When using `text-decoration`, it’s important to consider accessibility. Ensure that your designs are usable by everyone, including people with disabilities.

Color Contrast

Ensure sufficient color contrast between the text decoration line and the background. This is particularly important for users with visual impairments.

Best Practice: Use a color contrast checker to ensure your color choices meet accessibility standards (WCAG).

Avoid Relying Solely on Decoration for Meaning

Don’t rely solely on text decorations to convey meaning. For example, don’t just use `line-through` to indicate deleted content; also, provide alternative cues such as a label or a note.

Best Practice: Combine text decorations with other visual cues or text to ensure the meaning is clear to all users.

Screen Reader Compatibility

Screen readers should be able to interpret text decorations correctly. Ensure your HTML is well-structured and your CSS is applied semantically.

Best Practice: Test your website with a screen reader to ensure that text decorations are announced appropriately.

Key Takeaways and Best Practices

Here’s a summary of the key takeaways and best practices for using `text-decoration`:
- Understand the Basics: Master the `none`, `underline`, `overline`, and `line-through` values.
- Use Advanced Techniques: Leverage `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the shorthand property for more control.
- Style Links Effectively: Remove the default underline and add hover effects for better user experience.
- Mark Content Clearly: Use `line-through` for deleted content and `overline` or `underline` for headings.
- Avoid Common Mistakes: Remember to reset link styles and use decorations sparingly.
- Prioritize Accessibility: Ensure sufficient color contrast and don’t rely solely on decoration for meaning.
FAQ

Here are some frequently asked questions about `text-decoration`:
1. Can I animate `text-decoration`?
  Yes, you can animate `text-decoration` using CSS transitions. However, animating the `text-decoration-line` or `text-decoration-style` properties directly is not supported. Instead, you can animate the color or use other properties to achieve similar effects (e.g., using `transform` to scale a pseudo-element).
2. Is it possible to have multiple decorations on the same text?
  No, the `text-decoration` property itself does not support multiple decorations directly. You can, however, simulate multiple decorations by using pseudo-elements (::before and ::after) to create additional lines or effects.
3. How do I remove the underline from a link only on hover?
  You can remove the underline from links by default using text-decoration: none; and then add it back on hover using the :hover pseudo-class: a:hover { text-decoration: underline; }.
4. Can I apply different styles to different parts of the same text?
  Yes, you can achieve this by wrapping specific parts of the text in <span> elements and applying different styles to those spans. This allows for granular control over text decoration within a single paragraph or heading.
By mastering the `text-decoration` property and its related properties, you gain powerful control over the visual presentation of text on your website. Whether you’re styling links, marking deleted content, or adding visual flair to your headings, `text-decoration` is an essential tool in your CSS toolkit. Remember to consider accessibility and use these techniques thoughtfully to create a user-friendly and visually appealing web experience. The ability to precisely control the appearance of text is a fundamental skill in web design, contributing significantly to both aesthetics and usability. Embrace these techniques, experiment with different styles, and refine your approach to text decoration to create websites that are not only functional but also visually engaging. This knowledge empowers you to craft a more compelling and user-friendly online presence, where the text not only conveys information but also captivates and guides the user. Your mastery of this property will undoubtedly contribute to the overall polish and professionalism of your web designs.
February 22, 2026