Wie passe ich die Länge und Position von Unterstreichungen in CSS an?

Anpassen der Unterstreichungslänge und -position in CSS

Das Unterstreichen von Textelementen kann eine unkomplizierte Aufgabe sein, das Anpassen der Länge und Position der Unterstreichung jedoch schon herausfordernd sein. So können Sie den Unterstreichungsstil präzise steuern:

Längen- und Höhensteuerung:

Um die Länge der Unterstreichung zu bestimmen, verwenden Sie die Eigenschaft „Hintergrundgröße“. Geben Sie die Breite und Höhe der Unterstreichung an, z. B. Hintergrundgröße: 80 % 2 Pixel;. Durch Erhöhen des Prozentwerts wird die Unterstreichung verlängert, während durch Anpassen des Höhenwerts die Linienstärke gesteuert wird.

Positionsanpassung:

Mit der Eigenschaft „Hintergrundposition“ können Sie die anpassen vertikale Position der Unterstreichung relativ zum Text. Um die Linie näher an den Text zu verschieben, verringern Sie den Wert für den Abstand unten. Um es weiter weg zu verschieben, erhöhen Sie den Abstand.

Beispiel mit Anpassung:

Hier ist ein Beispiel, das zeigt, wie die Unterstreichungslänge, -höhe und -position geändert werden kann:

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

Durch die Einbeziehung dieser Techniken können Sie individuelle Unterstreichungen erstellen, die die visuelle Attraktivität und Lesbarkeit Ihres Dokuments verbessern Text.

Das obige ist der detaillierte Inhalt vonWie passe ich die Länge und Position von Unterstreichungen in CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!