How can i underline text in css

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. 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. 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. JavaTpoint offers too many high quality services. Mail us on [email protected] , to get more information about given services. Please mail your requirement at [email protected] Duration: 1 week to 2 week. CSS Tutorial. This site is developed so that students may learn computer science related technologies easily.

The javaTpoint. No one is perfect in this world, and nothing is eternally best. But we can try to be better. As we want the underline to be the same color as the link, we use currentColor for both the start and end of the gradient. Also, disable background-repeat to prevent multiple instances of the image from being created. Use background-size to specify a zero width and a 2 px height. Zero width means that the underline will only appear on hover. Set the transition to background-size , so the change takes 0.

You can also use actual images e. Here are a couple of examples inspired by John D. Read more about backgrounds: CSS Background. This border would be then animated with CSS transition properties. You can also create an underline with the box-shadow property that attaches a shadow to an HTML element. You can make this shadow larger on hover by increasing the vertical offset.

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. Default value: none currentcolor solid Inherited: no Animatable: no, see individual properties. Property text-decoration 1. Value Description text-decoration-line Sets the kind of text decoration to use like underline, overline, line-through text-decoration-color Sets the color of the text decoration text-decoration-style Sets the style of the text decoration like solid, wavy, dotted, dashed, double initial Sets this property to its default value.

Read about initial inherit Inherits this property from its parent element. Read about inherit. Report Error.