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
Barbara StreisandOriginal
2024-12-24 02:33:14446Durchsuche
<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>
<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;
}
<p>
  ABC

<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!

Stellungnahme:
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