So steuern Sie die Darstellung von Unterstreichungen

Unterstreichungen können angepasst werden, um die visuelle Attraktivität und Lesbarkeit zu verbessern. Um die Länge und Position einer Textdekoration:unterstrichen zu manipulieren, gibt es eine einfache, aber effektive Technik, die die Verwendung von Farbverläufen beinhaltet:

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

Positionsanpassung:

• Um die Linie zu verschieben, passen Sie die Eigenschaft „Hintergrundposition“ an.
• Zum Beispiel Hintergrundposition: unten links; richtet die Linie links vom Text aus.

Längenanpassung:

• Um die Länge zu steuern, passen Sie die Eigenschaft „Hintergrundgröße“ an.
• Beispiel: Hintergrundgröße: 50 % 1 Pixel; erstellt eine kürzere Zeile.

Zusätzliche Anpassung:

• Nahe am Text: padding-bottom: 0; bringt die Linie näher an den Text.
• Far from Text: padding-bottom: 10px; vergrößert den Abstand zwischen der Linie und dem Text.
• Verschiedene Farben: Passen Sie die Linienfarbe an, indem Sie die Eigenschaft „Hintergrundbild“ ändern, z. B. „Hintergrundbild: linear-gradient(rot 0 0 );.