How to underline text in CSS?

The text-decoration CSS property is used to decorate the content of the text. It can add lines above, under, and through the text. This CSS property decorates the text with several kinds of lines. It is the shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

The property text-decoration-line is used to underline the text. This property has three values that are overline, underline, or line-through. So, the value underline is used to underline the text in CSS. This value draws the underline beneath the inline text.

Example

Output

There is no CSS property to apply an underline only to individual words in a sentence or an element with multiple words. So, the best way to achieve it is by wrapping the underlined words in a span element and then applies the underline to those spans.

Let's see how to underline some selected words by using the following example.

Example

In this example, we are also using the text-decoration-style property, which provides style to the underline of the selected text. We are using the double value of this property. Here, there are two elements that contain the text to be underlined.

Output