In this tutorial, we will learn how to underline text in CSS using different techniques. Underlining text is often used to emphasize certain words or phrases, or to indicate links. By the end of this tutorial, you'll be able to apply underlining to your text using various CSS methods.
Using the text-decoration
Property
The simplest and most common way to underline text in CSS is by using the text-decoration
property. This property can be used to apply various styles to text, including underlining.
Here's an example of underlining text using the text-decoration
property:
<!DOCTYPE html>
<html>
<head>
<title>Text-decoration Example</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This text is underlined.</p>
</body>
</html>
In the example above, we've set the text-decoration
property to underline
for the <p>
element, which underlines the text within the element. Below is a live example:
See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.
Using the border-bottom
Property
Another method to underline text in CSS is by using the border-bottom
property. This approach provides more control over the appearance of the underline, such as its thickness, style, and distance from the text.
Here's an example of underlining text using the border-bottom
property:
<!DOCTYPE html>
<html>
<head>
<title>Border-bottom Example</title>
<style>
p {
display: inline; /* Required for border-bottom to work with block elements */
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<p>This text is underlined using border-bottom.</p>
</body>
</html>
In the example above, we've set the display
property to inline
and applied a border-bottom
style to the <p>
element, which underlines the text within the element.
Customizing the Underline Style
You can further customize the appearance of the underline using various CSS properties.
Changing the Underline Color
To change the underline color, use the text-decoration-color
property along with the text-decoration
property.
Example:
p {
text-decoration: underline;
text-decoration-color: red;
}
The example above sets the underline color to red.
Changing the Underline Style
To change the underline style, use the text-decoration-style
property along with the text-decoration
property.
Example:
p {
text-decoration: underline;
text-decoration-style: dashed;
}
The example above sets the underline style to dashed.
FAQs
A: Yes, you can use the <span>
element to underline specific parts of the text within an element. Apply the desired CSS style to the <span>
element to underline the text within it.
A: By default, links are underlined in most browsers. To remove the underline from a link, set the text-decoration
property to none
for the <a>
element.
A: Yes, you can create a double underline using the text-decoration-style
property. Set the property value to double
along with the text-decoration
property set to underline
.