CSS sets the distance between text and underline
Setting the Space Between Text and Underline with CSS
In web design, the space between text and underline is a common design requirement. Using CSS style sheets, we can easily control the space between text and underline. This article will detail how to use CSS to set the space between text and underline, including different methods and sample code.
Method 1: Use the text-decoration property
The text-decoration property is used in CSS to control text decoration effects, including underlining. We can adjust the distance between the text and the underline by setting the text-decoration property. Below is an example code:
a {
text-decoration: underline;
padding-bottom: 5px;
}
In the above example, we add an underline to the link and set the underline to 5px. When the user hovers over the link, the distance between the underline and the text will change.
Method 2: Using the border-bottom property
In addition to using the text-decoration property, we can also use the border-bottom property to adjust the distance between the text and the underline. Here’s an example:
a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
In the example above, we added a bottom border to the link and set the padding between the border and the text to 5px. This method can also adjust the distance between the text and the underline.
Method 3: Using pseudo-elements
Another common method is to use pseudo-elements to adjust the distance between the text and the underline. Here’s an example:
a {
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
margin-top: 5px;
}
In the example above, we use the ::after pseudo-element to create an underline the same width as the text and set the margin between the underline and the text to 5px. This approach allows for more flexible adjustment of the distance between the text and the underline.
Sample Code
Here are some more specific sample codes that demonstrate how to use CSS to set the distance between text and underline:
Example 1: Adjusting the distance between link underlines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjust Underline Distance</title>
<style>
a {
text-decoration: underline;
padding-bottom: 10px;
}
</style>
</head>
<body>
This is a link with adjusted underline distance
</body>
</html>
Output:
Example 2: Using the border-bottom property to adjust underline distance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjust Underline Distance</title>
<style>
a {
border-bottom: 1px solid black;
padding-bottom: 15px;
}
</style>
</head>
<body>
This is a link with adjusted underline distance using border-bottom
</body>
</html>
Output:
In the example above, we add a bottom border to the link and set the distance between the border and the text to 15px.
Example 3: Use pseudo-elements to adjust underline distance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjust Underline Distance</title>
<style>
a {
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
margin-top: 20px;
}
</style>
</head>
<body>
This is a link with adjusted underline distance using pseudo element
</body>
</html>
Output:
In the above example, we use the ::after pseudo-element to create an underline the same width as the text and set the distance between the underline and the text to 20px.
Through the above code examples, we can see how different methods can be used to adjust the distance between text and underline. Depending on the actual needs and design style, we can choose the appropriate method to achieve the desired effect. CSS provides a wealth of style properties and techniques to help us achieve various design needs, including adjusting the distance between text and underline.