Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-07 11:19:03
Original
961 Leute haben es durchsucht

How Can I Customize Text Underline Length and Position with CSS Gradients?

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 */
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!