As specified earlier, the text-decoration property is used to set or remove the decoration from the text for the element.
This is actually a shorthand property, and there are some other properties as well, which we can take into consideration.
We are going to consider those properties ahead, but first of all, we are going to discuss the text-decoration shorthand property, and do some basic stuff like adding some underline for some text, some overline for the text, or some line through for the text. Here is how you do it –
- text-decoration: overline; – this adds a line above the text.
- text-decoration: line-through; – this adds a line through the text.
- text-decoration: underline; – this adds a line under the text.
Let’s now have a look at some of the examples, which make us understand the use of the text-decoration property.
Here, we can add some underline, overline, or some line-through for the text in some elements. But, giving an underline should be avoided, since we know that the links usually have an underline, so giving an underline to some normal text can create confusion related to the general text and the links. However, if you wish to still give the underline to some text, you can give it. In this example, we are going to give an overline to the text of the element –
Have a look at the output of the program, and it is of no surprise, that the text from that element is going to have an overline.
Anyways, let’s try to use the underline value for the text-decoration property as well, on some text, and it is one of the options that we have. Let’s have a look at the value underline for the text in some elements –
As you can see, we have made use of the value underline, to the text in the div element. However, using underlining for the general text should be avoided. But have a look at the output for the above code. –
There is another value, called the line-through, which simply means that a line will go through the text of that particular element. So, let’s try that value as well –
Now, if we try to have a look at the output, we can just see that the line is now going through the text in the element. Have a look at the output –
As you can see, the text now has a line going through. So, if you need to do something like this, you can simply do it.
Till now, we have been getting some different decorations to the text, like underline, overline, or line-through. But let’s say that you are required to remove any decoration from the text, like in case, if you want to remove the underline that the link has, you can simply again make use of the text-decoration property, with a value of none. This will just remove any decoration from the text.
Now, let’s try to remove the decoration from the link. We will use the same text-decoration property.
So, here is what a normal link looks like –
But after we set the text-decoration to none for the link, the underline is removed. Here is how you can do that –
output –
As you can see, the link now does not have any kind of underline now.
The thing is that the text-decoration is the shorthand property for some other properties like – text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. As the names of the respective properties say, they do the same thing.
With the text-decoration line, we are defining, what type of line should be there. It has some values like underline, overline, line-through, none, etc. You can also put multiple values in there, like underline line-through, and then both things will be applied.
With the text-decoration color, we are straightaway specifying the color of the decoration added by the above text-decoration-line property. We are going to specify the colors as we do always.
With the text-decoration-style property, we are specifying the style of the line specified by the text-decoration line. It has some values like dashed, dotted, solid, wavy, and double.
With the text-decoration-thickness property, we are specifying the stroke thickness of the line specified by the text-decoration line.
A shorthand property for all these above-stated properties is the text-decoration property.
Example for using these above-stated properties –
As you can see in the output, the text contains an underline, which is green in color, and it is quite thicker now. So, whenever you want to do something like this, you can do it using these properties related to the text decoration.
