Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit CSS eine dicke Unterstreichung hinter Text erstellen?

Wie kann ich mit CSS eine dicke Unterstreichung hinter Text erstellen?

Barbara Streisand
Freigeben: 2024-12-24 02:33:14
Original
403 Leute haben es durchsucht
<p>How Can I Create a Thick Underline Behind Text Using CSS?

<p>Erstellen einer dicken Unterstreichung hinter Text mit CSS

<p>Um mit Spans und CSS den Effekt einer dicken Unterstreichung hinter Text zu erzielen, gibt es eine Einige Techniken, die Sie anwenden können:

<p>Option 1: Verschachtelt Spannen

<p>Dieser Ansatz beinhaltet das Verschachteln einer Reihe von Spannen mit jeweils zunehmenden unteren Rändern in Größe und Farbe:

<p>
Nach dem Login kopieren
<p>Option 2: Box Shadow

<p>Eine andere Möglichkeit besteht darin, Box-Schatten zu verwenden, um das zu erstellen unterstreichen:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}
Nach dem Login kopieren
<p>
  ABC

Nach dem Login kopieren
<p>Mit diesen Methoden können Sie die Illusion einer dicken Unterstreichung hinter Ihrem Text erzeugen, entweder über oder unter der Grundlinie.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS eine dicke Unterstreichung hinter Text erstellen?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage