How Do I Adjust the Length and Position of Underlines in CSS?

Adjusting Underline Length and Position in CSS

Underlining text elements can be a straightforward task, but customizing the length and position of the underline can be challenging. Here's how you can achieve precise control over underline styling:

Length and Height Control:

To determine the length of the underline, use the background-size property. Specify the width and height of the underline, e.g., background-size: 80% 2px;. Increasing the percentage value will lengthen the underline, while adjusting the height value controls the line thickness.

Position Adjustment:

The background-position property allows you to adjust the vertical position of the underline relative to the text. To move the line closer to the text, reduce the padding-bottom value; to move it further away, increase the padding.

Example with Customization:

Here's an example demonstrating how to modify the underline length, height, and position:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-size: 80% 2px;  
  background-position: bottom center; 
  background-repeat: no-repeat;
  padding-bottom: 4px;
}
.custom-underline {
  background-size: 50% 1px;     
  background-position: bottom left; 
  padding-bottom: 10px;
}

By incorporating these techniques, you can create customized underlines that enhance the visual appeal and readability of your text.

The above is the detailed content of How Do I Adjust the Length and Position of Underlines in CSS?. For more information, please follow other related articles on the PHP Chinese website!