Wie kann ich die Länge und Position der Textunterstreichung mit CSS-Verläufen anpassen?

Anpassen der Länge und Position der Textunterstreichung

Um anpassbare Textunterstreichungen zu erreichen, bieten CSS-Verläufe eine vielseitige Lösung. Durch Anpassen von Parametern wie Hintergrundgröße, Hintergrundposition und Abstand können Sie sowohl die Länge als auch die Position der Unterstreichung mühelos anpassen.

Länge anpassen:

Steuerung die Länge der Unterstreichung durch die Eigenschaft background-size. Geben Sie einen Prozentsatz oder einen festen Pixelwert (z. B. 80 % 2 Pixel) an, um die Länge der Linie zu skalieren.

Position ändern:

Manipulieren Sie die Position der Unterstreichung mithilfe des Hintergrunds -Position. Durch Ändern der horizontalen und vertikalen Koordinaten können Sie die Zeile relativ zum Text neu positionieren (z. B. unten in der Mitte für eine zentrale Position).

Beispiel:

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

Zusätzliche Anpassungen:

Zusätzlich zu Länge und Position können Sie Ihre Unterstreichungen mit verschiedenen anderen Eigenschaften verbessern:

• klein - Verkürzt die Länge erheblich
• links – Richtet die Linie am linken Rand aus
• zentriert-nah – Zentriert die Linie nah am Text
• rechts – Richtet die Linie am rechten Rand aus
• nah – Verschiebt die Linie nach oben nahe an den Text
• groß – Erhöht die Länge und Dicke
• weit – Fügt eine Lücke zwischen der Linie und dem Text hinzu

Das obige ist der detaillierte Inhalt vonWie kann ich die Länge und Position der Textunterstreichung mit CSS-Verläufen anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!