CSS style underline
CSS Underline Styles
In web design, underlining is a common text decoration effect that can be used to emphasize text content or serve as a visual cue for links. In CSS, we can achieve underlining effects in various ways, including using the text-decoration property and the border-bottom property. This article will detail how to use CSS styles to achieve different types of underline effects.
1. Use the text-decoration property to achieve underlining
The text-decoration property is used in CSS to control text decoration effects. The underline value can achieve the underline effect. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Decoration Example</title>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and set the CSS style text-decoration: underline; to achieve the text underline effect. After running the code, you can see that the paragraph text is underlined.
2. Using the border-bottom Property to Create an Underline
In addition to using the text-decoration property, we can also use the border-bottom property to create an underline effect. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Bottom Example</title>
<style>
.underline {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we also added the .underline class to a paragraph element and set the CSS style border-bottom: 1px solid black; to achieve the text underline effect. After running the code, you can see that the paragraph text is underlined.
3. Using Pseudo-elements to Achieve Underline Effects
In addition to adding underline styles directly to text elements, we can also use pseudo-elements to achieve underline effects. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo Element Example</title>
<style>
.underline {
position: relative;
}
.underline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we add the .underline class to a paragraph element and use the pseudo-element ::after to create an absolutely positioned element. By setting styles such as width: 100%; height: 1px; background-color: black;, we achieve an underlined text effect. After running the code, you can see that the paragraph text is underlined.
4. Using a Background Image to Create an Underline Effect
In addition to the above methods, we can also use a background image to create an underline effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Image Example</title>
<style>
.underline {
background-image: linear-gradient(to right, black 50%, transparent 50%);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the background-image property to set a linear gradient background image. By setting styles such as background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;, we achieved an underline effect for the text. After running the code, you can see that the paragraph text is underlined.
5. Using the box-shadow Property to Achieve an Underline Effect
In addition to the above methods, we can also use the box-shadow property to achieve an underline effect. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Shadow Example</title>
<style>
.underline {
box-shadow: 0 1px 0 black;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the box-shadow property to set a shadow effect. By setting the style box-shadow: 0 1px 0 black;, we achieved an underline effect for the text. After running the code, you can see that the paragraph text is underlined.
6. Using linear-gradient to Create a Gradient Underline Effect
In addition to solid-color underlines, we can also use linear-gradient to create a gradient underline effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linear Gradient Example</title>
<style>
.underline {
background-image: linear-gradient(to right, black, white, black);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p class="underline">This is a text with gradient underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used linear-gradient to create a gradient background image. By setting styles such as background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;, we achieved a gradient underline effect for the text. After running the code, you can see that the paragraph text is now underlined.
7. Use the text-shadow property to achieve an underline effect
In addition to the box-shadow property, we can also use the text-shadow property to achieve an underline effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadow Example</title>
<style>
.underline {
text-shadow: 0 1px 0 black;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the text-shadow property to set a text shadow effect. By setting the style text-shadow: 0 1px 0 black;, we achieved an underline effect. After running the code, you can see that the paragraph text is underlined.
8. Using the background Property to Underline
In addition to the above methods, we can also use the background property to achieve an underline effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Example</title>
<style>
.underline {
background: linear-gradient(to right, black 50%, transparent 50%) bottom repeat-x;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the background property to set a linear gradient background image. By setting the style background: linear-gradient(to right, black 50%, transparent 50%) bottom repeat-x;, we achieved an underline effect for the text. After running the code, you can see that the paragraph text is underlined.
9. Using the clip-path Property to Underline
In addition to the above methods, we can also use the clip-path property to achieve an underline effect. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip Path Example</title>
<style>
.underline {
clip-path: polygon(0 100%, 100% 100%, 100% 95%, 0 95%);
background-color: black;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the clip-path property to set a polygonal clipping path. By setting the style clip-path: polygon(0 100%, 100% 100%, 100% 95%, 0 95%); background-color: black;, we achieved an underlined text effect. After running the code, you can see that the paragraph text is underlined.
10. Using the mix-blend-mode Property to Create an Underline Effect
In addition to the above methods, we can also use the mix-blend-mode property to create an underline effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mix Blend Mode Example</title>
<style>
.underline {
background-color: black;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<p class="underline">This is a text with underline.</p>
</body>
</html>
Output:
In the above example, we added the .underline class to a paragraph element and used the mix-blend-mode property to set the blend mode. By setting the background-color: black; mix-blend-mode: difference; styles, we achieved an underlined text effect. After running the code, you can see that the paragraph text is underlined.