Prev Next

CSS Text Decoration

The text-decoration property adds or removes decorative lines on text, such as underlines, overlines, or line-through effects. Common uses include styling links (underlining them) or indicating deleted text with a line-through.

Key Topics

Common Values

text-decoration: underline;, text-decoration: overline;, text-decoration: line-through;. Combine them for unique 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</title>
    <style>
        h1 {
            text-decoration: underline;
            font-family: Arial, sans-serif;
        }
        p {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>Underlined Heading</h1>
    <p>This paragraph text is struck through.</p>
</body>
</html>

Explanation: Decorative lines draw attention or indicate status changes, but use them thoughtfully to avoid cluttering your design.

By default, links are underlined. Customize them by removing text-decoration: none; or changing underline styles to suit your branding.

Removing Defaults

If you prefer a cleaner look, remove default underlines from headings or links, but ensure users can still identify clickable elements.

Key Takeaways

  • Flexibility: Underlines, overlines, and line-through provide visual cues.
  • Link Styling: Control default link underlines to match your design.
  • Clarity: Use decorations meaningfully, enhancing rather than detracting from readability.
Prev Next