CSS text underline
CSS Text Underline
In web design, text underline is a common decorative effect that can be used to emphasize text content or add visual appeal to links. In CSS, we can achieve different styles of text underline effects with simple code. This article will detail how to use CSS to achieve text underline effects and provide several sample code examples for reference.
1. Basic Underline Styles
First, let’s look at how to add basic underline styles to text using CSS. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Underline</title>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">This is a basic underline example from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we add basic underline styling to a paragraph element. By setting the text-decoration: underline; property, text content will appear underlined.
2. Underline Color
In addition to basic underline styles, we can also set the underline color using CSS. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Color</title>
<style>
.underline-color {
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<p class="underline-color">This is an underline with blue color from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set a blue color for the text underline. By setting the color: blue; property, the underline color changes to blue.
3. Underline Style
In addition to basic underline styles and colors, we can also set the underline style through CSS. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Style</title>
<style>
.underline-style {
text-decoration: underline dotted;
}
</style>
</head>
<body>
<p class="underline-style">This is an underline with dotted style from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set a dotted style for the text underline. By setting the text-decoration: underline dotted; property, the underline style will be changed to a dotted style.
4. Underline Position
In CSS, we can also control the position of the underline by setting different values for the text-decoration property. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Position</title>
<style>
.underline-position {
text-decoration: underline overline;
}
</style>
</head>
<body>
<p class="underline-position">This is an underline with overline position from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set the position of the underline and overline. By setting the text-decoration: underline overline; property, the underline will appear above the text.
5. Underline Thickness
In addition to style and position, we can also set the underline thickness using CSS. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Thickness</title>
<style>
.underline-thickness {
text-decoration: underline;
text-decoration-thickness: 2px;
}
</style>
</head>
<body>
<p class="underline-thickness">This is an underline with 2px thickness from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set a 2-pixel thickness for the text underline. By setting the text-decoration-thickness: 2px; property, the underline will be thicker.
6. Combining Underline Styles
In CSS, we can also combine multiple styles to achieve more diverse underline effects. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Underline Styles</title>
<style>
.combined-underline {
text-decoration: underline dotted blue;
}
</style>
</head>
<body>
<p class="combined-underline">This is a combined underline with dotted style and blue color from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we combine the underline style, color, and position. By setting the text-decoration: underline dotted blue; property, the underline appears as a blue dot.
7. Underline Animation
In addition to static underline effects, we can also create dynamic underline effects through CSS animations. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Animation</title>
<style>
@keyframes underline-animation {
0% {
text-decoration: none;
}
50% {
text-decoration: underline;
}
100% {
text-decoration: none;
}
}
.underline-animation {
animation: underline-animation 2s infinite; }
</style>
</head>
<body>
<p class="underline-animation">This is an animated underline effect from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we use CSS animation to create a blinking underline effect. By setting the @keyframes keyframes and the animation property, the underline will blink continuously over 2 seconds.
8. Underline Hanging Effect
In CSS, we can also set the underline hanging effect using the text-underline-offset property. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Offset</title>
<style>
.underline-offset {
text-decoration: underline;
text-underline-offset: 5px;
}
</style>
</head>
<body>
<p class="underline-offset">This is an underline with 5px offset from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set a 5-pixel hanging effect for the text underline. By setting the text-underline-offset: 5px; property, the underline will appear below the text and offset downward by 5 pixels.
9. Underline Transparency
In CSS, we can also set the underline’s transparency using the text-decoration-color property. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Opacity</title>
<style>
.underline-opacity {
text-decoration: underline;
text-decoration-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="underline-opacity">This is an underline with 50% opacity from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set a 50% transparency for the text underline. By setting the text-decoration-color: rgba(255, 0, 0, 0.5); property, the underline will appear red with a 50% transparency.
10. Underline Spacing
In CSS, we can also set the underline spacing using the text-decoration-skip-ink property. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Spacing</title>
<style>
.underline-spacing {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<p class="underline-spacing">This is an underline with automatic spacing from geek-docs.com</p>
</body>
</html>
Output:
In the example code above, we set automatic spacing for the underline. By setting the text-decoration-skip-ink: auto; property, the underline will automatically adjust its spacing based on the text content.
Through the example code above, we can see that implementing text underline effects in CSS is extremely flexible and versatile. By setting different properties and values, we can achieve a variety of underline styles, adding more visual appeal to web designs.