CSS text underline spacing
CSS Text Underline Spacing
In web design, text underline is one of the common decorative elements. It can be used to mark links, emphasize important information, and more. However, sometimes we want to adjust the style of text underlines, including the thickness, length, color, and spacing between the underline and the text.
This article will detail how to use CSS to control the spacing of text underlines, giving you more flexibility in customizing the style of text underlines when designing web pages.
Text Underline CSS Properties
In CSS, we can use the text-decoration property to control text decoration effects, including underlining. Common values include:
none: Default value, text is not underlined.underline: Text is underlined.overline: Text is overlined.line-through: Text is struck through.
In addition, the text-decoration-style property can be used to specify the underline style, including:
solid: A solid line.double: Double line.dotted: Dotted line.dashed: Dashed line.
Controlling Underline Spacing
Method 1: Using the text-decoration Property
First, we can use the text-decoration property to control the underline style. However, the text-decoration property doesn’t directly control underline spacing, so it needs to be combined with other properties.
.underline-spacing {
text-decoration: underline;
text-decoration-style: solid;
text-underline-offset: 0.2em; /* Controls the spacing between the underline and the text */
}
In the example above, we added the text-underline-offset property to the .underline-spacing class to control the spacing between the underline and the text. 0.2em specifies a spacing of 0.2 times the text size. You can adjust this value to adjust the underline’s position according to your needs.
Method 2: Using border-bottom to simulate an underline
Another method is to use the border-bottom property to simulate an underline effect, and use the padding-bottom property to control the spacing between the underline and the text.
.border-bottom-underline {
border-bottom: 1px solid black; /* Underline style */
padding-bottom: 0.2em; /* Controls the spacing between the underline and the text */
}
In the example above, we added the border-bottom property to the .border-bottom-underline class to create an underline effect, and used the padding-bottom property to control the spacing between the underline and the text.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Decoration Example</title>
<style>
.underline-spacing {
text-decoration: underline;
text-decoration-style: solid;
text-underline-offset: 0.2em; /* Controls underline and text spacing */
}
.border-bottom-underline {
border-bottom: 1px solid black; /* Underline style */
padding-bottom: 0.2em; /* Controls underline and text spacing */
}
</style>
</head>
<body>
<h2>Text Decoration Example</h2>
<p class="underline-spacing">This text has custom underline spacing.</p>
<p class="border-bottom-underline">This text uses border-bottom to create an underline with custom spacing spacing.</p>
</body>
</html>
Running Results
Open the sample code above in a browser and you’ll see two lines of text, demonstrating how to use the text-underline-offset and border-bottom properties to control the spacing between text underlines. By adjusting the corresponding values, you can customize the underline style to achieve the effect that suits your design needs.
In short, controlling the spacing between text underlines is a very important skill in web design. Proper adjustment can make your web pages look more beautiful and professional.