css
  1. css-text-decoration
PreviousNext

CSS Text Decoration

The text-decoration property in CSS controls the decoration of text, allowing the addition of various styles like underline, overline, line-through, or none at all.

Basic Usage of the text-decoration Property

The text-decoration property can take several values:

  • text-decoration: none;: Removes all text decorations.
  • text-decoration: underline;: Adds a line underneath the text.
  • text-decoration: overline;: Adds a line over the text.
  • text-decoration: line-through;: Adds a line through the text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .decorated-text {
    text-decoration: underline;
  }
</style>
</head>
<body>

<p class="decorated-text">This text has an underline decoration.</p>

</body>
</html>
Try Playground

Benefits of Using text-decoration Property

  • Visual Emphasis: Helps in emphasizing or differentiating text elements within the layout.
  • Aesthetic Appeal: Adds decorative elements to the text content, enhancing its visual appearance.

Best Practices for Using text-decoration

  • Use with Intention: Apply text decoration styles thoughtfully, considering the purpose and visual impact on the overall design.
  • Readability: Ensure that text decorations do not hinder readability or obstruct the text content.

Understanding and employing the text-decoration property provides control over the visual presentation of text elements, adding stylistic elements or emphasis to text content in web design.

Text AlignText Transform
Published on: