Underlining text on a website is something you'll probably need to do at some point. Maybe you want to emphasize something important, or you're creating a custom link style. Whatever the reason, CSS gives you plenty of ways to do it.
Let me walk you through everything you need to know about underlining text in CSS.
CSS Underline Text Example
The simplest method to underline text in CSS is to use the text-decoration property. Here's how it works:
p {
text-decoration: underline;
}
That's it! Any text inside a paragraph tag will now be underlined. Pretty straightforward, right?
You can apply this to any element. For example, if you want to underline a heading:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>This is an underlined heading</h2>
<p>This is normal text without underline.</p>
</body>
</html>
Output:
Customizing Your Underline in CSS
Now here's where it gets interesting. CSS lets you customize how that underline looks.
Changing the Underline Color in CSS
By default, the underline is the same color as your text. But you can change that:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-decoration-color: red;
}
</style>
</head>
<body>
<p>This text has a red underline!</p>
</body>
</html>
Now your underline will be red, even if your text is black.
Changing the Underline Style
You're not stuck with a solid line. You can make it dotted, dashed, or wavy:
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
text-decoration: underline dotted;
}
.dashed {
text-decoration: underline dashed;
}
.wavy {
text-decoration: underline wavy;
}
</style>
</head>
<body>
<p class="dotted">This has a dotted underline.</p>
<p class="dashed">This has a dashed underline.</p>
<p class="wavy">This has a wavy underline.</p>
</body>
</html>
Output:
The wavy underline is great for showing spelling errors or adding a playful touch to your design.
Changing the Underline Thickness using CSS
Want a thicker or thinner underline? Use text-decoration-thickness:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-decoration-thickness: 3px;
}
</style>
</head>
<body>
<p>This text has a thick 3px underline.</p>
</body>
</html>
You can use pixels, percentages, or keywords like thin and thick.
Shorthand CSS for Underline
Instead of writing multiple properties, you can combine them:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline wavy red 2px;
}
</style>
</head>
<body>
<p>This has a wavy red underline that's 2 pixels thick!</p>
</body>
</html>
This gives you an underlined text with a wavy red line that's 2 pixels thick. All in one line!
The Border Method
Sometimes you want more control over where the underline sits. That's when the border-bottom property comes in handy:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 2px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<p>This text uses a border instead of text-decoration.</p>
</body>
</html>
The difference here is that the border sits right at the bottom of the element, not directly under the text. This gives you a bit more spacing.
You can also add padding to push the line further down:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 2px solid blue;
padding-bottom: 5px;
display: inline-block;
}
</style>
</head>
<body>
<p>This has extra space between the text and the border.</p>
</body>
</html>
Removing Underlines using CSS
Links are underlined by default. Sometimes you want to remove that:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">This link has no underline</a>
</body>
</html>
This is super common when you're styling navigation menus or buttons.
Cool Hover Effects for Underlines
Here's a neat trick: add an underline only when someone hovers over the text:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">Hover over this link to see the underline appear!</a>
</body>
</html>
Or do the opposite and remove the underline on hover:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Hover over this link to remove the underline!</a>
</body>
</html>
Animated Underlines using CSS
Want to get fancy? You can animate an underline sliding in from the left:
<!DOCTYPE html>
<html>
<head>
<style>
a {
position: relative;
text-decoration: none;
color: blue;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: blue;
transition: width 0.3s;
}
a:hover::after {
width: 100%;
}
</style>
</head>
<body>
<a href="#">Hover to see the animated underline!</a>
</body>
</html>
This creates a line that grows from left to right when you hover. It's a smooth, modern effect that looks really professional.
Practical Tips
Here are a few things I've learned from using underlines in real projects:
Don't underline text that isn't a link unless you have a good reason. People expect underlined text to be clickable, so you might confuse your visitors.
If you're underlining for emphasis, consider using bold text or a different color instead. It's often clearer.
When styling links, make sure they're still easy to identify. If you remove the underline, maybe change the color or add a hover effect so people know it's clickable.
The wavy underline works great for forms when you want to show an error without being too harsh about it.
Browser Support
All of these properties work in modern browsers. The only one you might need to watch out for is text-decoration-thickness, which older browsers don't support. But it's not a big deal because the underline will still show up, just with the default thickness.
Wrapping Up
Making text underline in CSS is easy once you know the basics. Start with text-decoration: underline, and experiment from there. Play around with colors, styles, and thicknesses until you find what looks good for your project. And remember, sometimes the simple solid underline is all you need!
