Menu
CSS

text-decoration

The text-decoration property in CSS is used to add special styling to text, like underlines, overlines, and line-throughs. It's an easy way to make your text stand out or to convey additional meaning. Here’s a quick guide to using it:

 

Common Values

 

1. none: 

Removes any decoration from the text. This is useful if you want to remove the underline from links.

a {
    text-decoration: none;
}

 

2. underline: 

Adds a line below the text. It’s great for emphasizing words or sentences.

p {
    text-decoration: underline;
}

 

3. overline: 

Adds a line above the text. It’s less common but can be used for special effects.

p {
    text-decoration: overline;
}

 

4. line-through:

 Adds a line through the middle of the text. This can indicate something is no longer valid or has been removed.

p {
    text-decoration: line-through;
}

 

5. underline overline: 

Adds lines both above and below the text. It’s a more dramatic effect, useful for special emphasis.

p {
    text-decoration: underline overline;
}

 

Example

Here’s a simple example showing how to use these styles:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Decoration Example by codersmiile</title>
    <style>
        .none {
            text-decoration: none;
        }
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .underline-overline {
            text-decoration: underline overline;
        }
    </style>
</head>
<body>
    <p class="none">codersmiile text has no decoration.</p>
    <p class="underline">codersmiile text is underlined.</p>
    <p class="overline">codersmiile text has an overline.</p>
    <p class="line-through">codersmiile text has a line through it.</p>
    <p class="underline-overline">codersmiile text has both an underline and an overline.</p>
</body>
</html>
CSS