How Can I Control the Appearance of Underlines Using CSS Gradients?

How to Control the Appearance of Underlines

Underlines can be tailored to enhance visual appeal and readability. To manipulate the length and position of a text-decoration:underline, there is a simple yet effective technique involving the use of gradients:

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

Position Adjustment:

• To move the line, adjust the background-position property.
• For instance, background-position: bottom left; aligns the line to the left of the text.

Length Adjustment:

• To control the length, adjust the background-size property.
• For example, background-size: 50% 1px; creates a shorter line.

Additional Customization:

• Close to Text: padding-bottom: 0; brings the line closer to the text.
• Far from Text: padding-bottom: 10px; increases the distance between the line and the text.
• Different Colors: Customize the line color by modifying the background-image property, e.g., background-image: linear-gradient(red 0 0);.

The above is the detailed content of How Can I Control the Appearance of Underlines Using CSS Gradients?. For more information, please follow other related articles on the PHP Chinese website!