Wie kann ich mit CSS eine dicke Unterstreichung hinter Text erstellen?-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-12-24 02:33:14

Original

410 Leute haben es durchsucht

How Can I Create a Thick Underline Behind Text Using CSS?

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

<p>
  ABC

Nach dem Login kopieren

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!