How to Underline Text in CSS
How to Underline Text in CSS
Reference: how to underline text in CSS
Underlining text in CSS is a common requirement, often encountered in web design and development. Underlining is commonly used to emphasize text or links, improving readability and user experience. Using CSS, you can easily control the style, color, and placement of text underlines to suit your design needs. For example, you can use the text-decoration property to control the display of text underlines. This property has several values, including none (default, no underline), underline (a single line below the text), overline (a single line above the text), and line-through (a single line through the text). You can display a single underline under the text by setting text-decoration to underline.
In addition to simple underline, you can also customize the underline style through other CSS properties. For example, you can use the text-decoration-color property to set the underline color, the text-decoration-style property to set the underline style (such as solid, dashed, dotted, and so on), and the text-decoration-thickness property to set the underline thickness.
Here is a simple HTML example showing how to underline text in CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Underline Example</title>
<style>
/* CSS style sheet */
.underline {
text-decoration: underline; /* Set text underline */
text-decoration-color: blue; /* Set underline color */
text-decoration-style: dashed; /* Set underline style to dashed */
text-decoration-thickness: 2px; /* Set underline thickness to 2 pixels */
}
</style>
</head>
<body>
<!-- HTML content -->
<p>This is a <span class="underline">sample text</span> with underline.</p>
</body>
</html>
The effect of executing this code is as follows:
In this example, a <span> element is used to wrap the text to be underlined. The <span> element is then assigned a class name of underline. This class is then styled using CSS to achieve a custom underline effect.
There are several common techniques for underlining text in CSS, including using the text-decoration property, pseudo-elements, and background https://coder-cafe.com/wp-content/uploads/2025/09/images. The following sections describe these methods in detail and provide corresponding code examples.
Using the text-decoration Property
The text-decoration property in CSS is used to control text decoration effects. By setting its value to underline, you can underline text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Underline Example</title>
<style>
.underline-text {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline-text">This text has underline.</p>
</body>
</html>
The effect of executing this code is as follows:
In the example above, we added the class .underline-text to the <p> element and set its text decoration to underline using CSS. You can apply this class to any element that needs an underline.
Using Pseudo-Elements
Another common method to simulate an underline effect is to use pseudo-elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Underline Example</title>
<style>
.underline-text {
position: relative;
}
.underline-text::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: black;
}
</style>
</head>
<body>
<p class="underline-text">This text has underline.</p>
</body>
</html>
The rendering of executing this code is:
In this example, we add a pseudo-element ::after to the element containing the text, position it at the bottom of the text using CSS, and style it to simulate an underline effect.
Using a Background Image
The final method is to use a background image to achieve an underline effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Underline Example</title>
<style>
.underline-text {
background-image: linear-gradient(0deg, transparent, transparent), linear-gradient(0deg, black, black);
background-size: 100% 1px, 100% 1px;
background-position: 0 100%, 0 100%;
background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
<p class="underline-text">This text has underline.</p>
</body>
</html>
The effect of executing this code is as follows:
In this example, we use two linear gradient background https://coder-cafe.com/wp-content/uploads/2025/09/images to simulate an underline effect: one with a transparent linear gradient and the other with a solid linear gradient. These two gradients are superimposed to create the underline effect.
The above are several common methods for underlining text in CSS. Developers can choose the appropriate method to achieve the underline effect according to their specific needs.
Common Problems and Solutions
Adding an underline to text in CSS is a common requirement in web design. Below, we’ll explore some common problems and provide solutions to achieve this functionality.
Question: How do I underline text in CSS?
There are several different ways to underline text in CSS. Here are a few common methods:
Method 1: Using the text-decoration Property
The simplest method is to use the CSS text-decoration property. This property can be used to underline text and add other decorative effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text</title>
<style>
.underline-text {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline-text">This text will be underlined.</p>
</body>
</html>
The effect of executing this code is as follows:
Method 2: Using Pseudo-Elements
Another common method for creating an underline effect is using CSS pseudo-elements. This method provides more flexible control over the underline’s style and placement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text</title>
<style>
.underline-text {
position: relative;
display: inline-block;
}
.underline-text::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: black;
}
</style>
</head>
<body>
<p class="underline-text">This text will be underlined.</p>
</body>
</html>
The effect of executing this code is as follows:
Method 3: Using Background and Border
You can also use the CSS background and border properties to simulate an underline effect. This method is often used to implement custom underline styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text</title>
<style>
.underline-text {
background-image: linear-gradient(to bottom, transparent 80%, black 80%);
background-size: 100% 1px;
background-repeat: no-repeat;
display: inline-block;
}
</style>
</head>
<body>
<p class="underline-text">This text will be underlined.</p>
</body>
</html>
The following is the result of executing this code:
When it comes to best practices for underlining text in CSS, there are several different ways to achieve this. Here are some of the most common and effective methods:
- Using the
text-decorationproperty: This is the simplest and most direct method. You can underline text by setting thetext-decorationproperty tounderline.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text with CSS</title>
<style>
.underline-text {
text-decoration: underline; }
</style>
</head>
<body>
<p class="underline-text">This text has an underline.</p>
</body>
</html>
The effect of executing this code is as follows:
- Using the
border-bottomproperty: This method allows for greater flexibility in controlling the underline’s style, such as width, color, and style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text with CSS</title>
<style>
.underline-text {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p class="underline-text">This text has an underline.</p>
</body>
</html>
The effect of executing this code is as follows:
- Combining the
:afterpseudo-element: This approach makes underlining more flexible, allowing you to add animation effects or add additional decoration below the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text with CSS</title>
<style>
.underline-text {
position: relative;
display: inline-block;
}
.underline-text:after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: black;
}
</style>
</head>
<body>
<p class="underline-text">This text </p>
</body>
</html>
The effect of executing this code is as follows:
With these methods, you can choose the method that best suits your project’s needs for underlining text. Whether it’s a simple underline or more complex effects, you can easily achieve them with CSS.
Conclusion
Underlining text in CSS is a relatively simple task, but there are many ways to achieve it, depending on your specific needs and application scenario. We’ve explored several ways to use the text-decoration property, including underline and underline-style. We’ve also shown how to create custom underline effects using the ::before and ::after pseudo-elements. Each of these methods has its advantages and disadvantages, and is suitable for different design needs.
In practice, choosing the right method depends on your design goals and desired interactivity. For designs that require greater flexibility and customization, using pseudo-elements to create underlines may be a better option. For simple underline effects, using the text-decoration property directly may be sufficient.
Overall, understanding these different methods and their application scenarios can help you more effectively implement text underlining in CSS to meet a variety of design needs.