CSS Underline Tag
CSS Underline Tag
In web design, underline is a common decorative effect that can be used to highlight text content or links. In CSS, we can use a number of properties to create underline effects. This article will detail how to use CSS to create different styles of underlined tags.
1. Basic Underline
First, let’s look at how to create a basic underline tag. We can use the text-decoration property to achieve the underline effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Underline</title>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">This is underlined text. </p>
</body>
</html>
Code Running Result:
In the example above, we define a style with the class name underline and set text-decoration: underline; to add an underline effect to the text. After running the code, you will see that the text content is underlined.
2. Double Underline
Sometimes, we may need to use double underline to highlight text content. We can achieve this effect by setting the text-decoration-style property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Underline</title>
<style>
.double-underline {
text-decoration: underline double;
}
</style>
</head>
<body>
<p class="double-underline">This is text with double underline. </p>
</body>
</html>
Code Running Results:
In the example above, we set text-decoration: underline double; to add a double underline effect to the text. After running the code, you will see that the text content is double underlined.
3. Underline Color
In addition to the underline style, we can also set the underline color. We can use the text-decoration-color property to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Color</title>
<style>
.underline-color {
text-decoration: underline;
text-decoration-color: red;
}
</style>
</head>
<body>
<p class="underline-color">This is red underlined text. </p>
</body>
</html>
Result of running the code:
In the example above, we set text-decoration-color: red; to add a red underline effect to the text. After running the code, you will see that the text content is underlined in red.
4. Underline Position
Sometimes, we may need to adjust the position of the underline, such as placing it below the text instead of the default bottom. We can use the text-underline-position property to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Position</title>
<style>
.underline-position {
text-decoration: underline;
text-underline-position: under;
}
</style>
</head>
<body>
<p class="underline-position">This is text underlined below the text. </p>
</body>
</html>
Code Runtime Results:
In the example above, we set text-underline-position: under; to place the underline below the text. After running the code, you’ll see that the text is underlined, and the underline is below the text.
5. Customizing Underline Styles
In addition to the default underline style, we can also customize the underline style. We can use the border-bottom property to achieve a custom underline effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Underline</title>
<style>
.custom-underline {
border-bottom: 2px dashed blue;
}
</style>
</head>
<body>
<p class="custom-underline">This is custom-styled underlined text. </p>
</body>
</html>
Code Runtime Results:
In the example above, we set border-bottom: 2px dashed blue; to add a blue dashed underline to the text. After running the code, you’ll see that the text content is underlined with the custom style.
6. Underline Animation
Sometimes, we may need to animate the underline, such as flashing or moving. We can use CSS animation properties to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Animation</title>
<style>
@keyframes underline-animation {
0% {
text-decoration: underline;
}
50% {
text-decoration: none;
}
100% {
text-decoration: underline;
}
}
.underline-animation {
animation: underline-animation 2s infinite;
}
</style>
</head>
<body>
<p class="underline-animation">This is text with an underline animation. </p>
</body>
</html>
Code Running Results:
In the example above, we define an animation called underline-animation and set animation: underline-animation 2s infinite; to add a flashing underline animation effect to the text. After running the code, you will see the text animated with the underline effect.
7. Underline Hover Effect
Sometimes, we may need to display an underline effect when the mouse hovers over the text. We can use the hover pseudo-class to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Hover</title>
<style>
.underline-hover {
text-decoration: none;
}
.underline-hover:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline-hover">Hover your mouse here to see the underline effect. </p>
</body>
</html>
Code Runtime Results:
In the example above, we define a class called underline-hover, disable the default underline effect by setting text-decoration: none;, and then use the hover pseudo-class to display the underline effect when the mouse hovers over the text. After running the code, you’ll see the text underlined when the mouse hovers over it.
8. Underline Width
Sometimes, we may need to adjust the width of the underline. We can use the border-bottom-width property to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Width</title>
<style>
.underline-width {
border-bottom: 3px solid green;
}
</style>
</head>
<body>
<p class="underline-width">This is a 3px green underlined text. </p>
</body>
</html>
Result of running the code:
In the example above, we set border-bottom: 3px solid green; to add a 3px green underline to the text. After running the code, you will see that the text content is underlined with a 3px green underline.
9. Underline Spacing
Sometimes, we may need to adjust the spacing between the underline and the text. We can use the text-underline-offset property to achieve this effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Offset</title>
<style>
.underline-offset {
text-decoration: underline;
text-underline-offset: 5px;
}
</style>
</head>
<body>
<p class="underline-offset">This is an underlined text with a 5px gap between it and the text. </p>
</body>
</html>
In the example above, we set text-underline-offset: 5px; to give the text an underline effect with a 5px gap between it and the text. After running the code, you’ll see the text is underlined, with a 5px gap between the underline and the text.
10. Combining Underline Styles
In addition to using a single underline style, you can also combine multiple underline styles. For example, you can use a double underline and a dashed underline style at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined Underline Styles</title>
<style>
.combined-underline {
text-decoration: underline double;
border-bottom: 2px dashed purple;
}
</style>
</head>
<body>
<p class="combined-underline">This is text with both double underline and dashed underline styles. </p>
</body>
</html>
In the example above, we use both text-decoration: underline double; and border-bottom: 2px dashed purple; to create a double underline and a dashed purple line. After running the code, you’ll see the text has both a double underline and a dashed line.
Through this article, you’ll learn how to create different styles of underline tags using CSS. From basic underlines to custom styles and animations, you can choose the style that best suits your text.