text-decoration Property in CSS
As mentioned already, the text-decoration property in CSS adds enhancing lines on the text appearing on a web page. The text-decoration property allows you can apply an underline, overline, line-through, and a combination of these to the specified text.
It has the following syntax
How to apply underline to text
Using the text-decoration property, you can underline a specific text.
The text has been underlined.
How to apply overline to text
Using the text-decoration property, you can set an overline on a specific text. Consult the example below.
An overline has been set on the text.
How to apply line-through to text
Using the text-decoration property, you can set a line-through on a specific text. Use the following piece of code.
A line-through has been applied to the text.
How to apply a combination of the above techniques to text
Using the text-decoration property, you can use a combination of underline, overline, and line-through on a specific text. Use the following piece of code.
text-decoration: underline overline;
The text has been underlined as well as overlined.
text-decoration a shorthand Property
A shorthand property in CSS is a property that lets you apply different values to other numerous CSS properties at once, saving your time and energy. The text-decoration property is also regarded as a shorthand property because it can be used to set values to following properties;
Before we demonstrate text-decoration property as a shorthand property with the help of an example. Lets first understand what these properties are.
text-decoration-line: This property is similar to the text-decoration property and can be used to apply decorations to the text.
text-decoration-color: This property is used to apply color to the decoration applied on the text.
text-decoration-style: The text-decoration-style property is used to apply different styles such as solid, wavy, dotted, dashed, and doubled to the text decoration (underline, overline, line-through, or a combination).
Let’s explore text-decoration as a shorthand property with the help of examples.
In the following example, we are applying color and style to text decoration using only the text-decoration property.
The text has decorated using a wavy red underline.
In the following example, we are applying a combination of underline and overline and setting the color and style as well.
The text has been decorated using a solid red underline and overline.
The text-decoration property in CSS lets you add enhancing lines to the text on web pages. These lines can be an underline, line-through, overline, or a combination of these to a specific text. This property is referred to as a shorthand property because you can set values to text-decoration-line, text-decoration-color, and text-decoration-style properties. This write-up, discusses the text-decoration property in depth, along with suitable examples.