How to underline text in CSS

To underline text in CSS, you can use the text-decoration property. The text-decoration property allows you to add various decorations to text, such as underline, overline, line-through, or a combination of these styles.

Here’s an example of how to underline text:

HTML:

<p class="underline-text">This text will be underlined.</p>

CSS:

.underline-text {
  text-decoration: underline;
}

In this example, we have a paragraph element with the class “underline-text.” We target this element in CSS using the class selector .underline-text and use the text-decoration property to add an underline to the text.

You can also use the text-decoration property to create different text decoration styles. For example, to add a line above the text, you can use text-decoration: overline;, and to add a line through the middle of the text, you can use text-decoration: line-through;.

Here’s an example showing different text decoration styles:

HTML:

<p class="underline-text">Underline</p>
<p class="overline-text">Overline</p>
<p class="line-through-text">Line-through</p>

CSS:

.underline-text {
  text-decoration: underline;
}

.overline-text {
  text-decoration: overline;
}

.line-through-text {
  text-decoration: line-through;
}

By using the text-decoration property, you can easily add or remove text decorations to suit your design requirements. Additionally, you can apply text decorations to links (<a> tags) to indicate that they are clickable or visited. For example:

a {
  text-decoration: underline;
}

a:visited {
  text-decoration: none; /* Remove underline from visited links */
}

Remember that the text-decoration property affects the entire element’s text content. If you want to underline only specific parts of the text or create more complex text decorations, you can use other CSS techniques, such as adding a bottom border or using pseudo-elements.