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

Erstellen einer dicken Unterstreichung hinter Text mit CSS

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

Option 1: Verschachtelt Spannen

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

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>
  <span>A</span><span>B</span><span>C</span>
</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!