Loading

Text Decoration

  • In CSS, the text-decoration property is used to control the decoration or styling of text within an HTML element.
  • The text-decoration property can be applied to inline and inline-block elements.

Values for the text-decoration property:

  • none: This is the default value and removes all text decoration.
  • underline: Adds an underline to the text.
  • overline: Adds a line above the text.
  • line-through: Adds a line through the text, like striking through it.
  • blink: Creates a blinking or flashing effect for the text. This value is not widely supported and is often avoided due to its obtrusive nature.

Example:

<html>

<head>
        <style>
                .overline {
                        text-decoration: overline solid red 5px;
                }

                .line-through {
                        text-decoration: line-through solid green 1px;
                }

                .underline {
                        text-decoration: underline dashed 2pt blue;
                }
        </style>
</head>

<body>
        <h2>Text Decoration using CSS</h2>
        <p class="overline">Overline text decoration.</p>
        <p class="line-through">Line-through text decoration.</p>
        <p class="underline">Underline text decoration.</p>
</body>

</html>

Output: