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);.