EN
CSS - text-decoration underline add padding
1
answers
0
points
How can I add 3px padding to the text-decoration: underline in CSS?
My code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.text {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="text">Example text...</div>
</body>
</html>
I want make greater offset between the text and the line.
1 answer
0
points
You can use text-underline-offset: 3px but be careful, this solution was released in major browsers around 2020.
As an alternative that will work in the most modern web browsers, you can use border-bottom property with some padding.
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.text {
text-decoration: underline;
text-underline-offset: 3px; /* <----- */
}
</style>
</head>
<body>
<div class="text">Example text...</div>
</body>
</html>
Alternative solution
Change the div element display to inline and use border-bottom property. Then add some padding-bottom to the element for more space between the text and underline.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.text {
display: inline;
border-bottom: 1px solid;
padding-bottom: 3px;
}
</style>
</head>
<body>
<div class="text">Example text...</div>
</body>
</html>
References
0 comments
Add comment