Wie kann ich mit CSS einen dicken Unterstreichungseffekt erzeugen, der sich hinter Text erstreckt?

Erstellen einer dicken Unterstreichung hinter Text mithilfe von CSS und Spans

Um den im Bild gezeigten dicken Unterstreichungseffekt zu erzielen, wird eine Kombination von Spans verwendet und CSS-Eigenschaften können verwendet werden.

Lösung باستخدام border-bottom:

Der primäre Ansatz besteht darin, verschachtelte Bereiche für jedes Zeichen zu erstellen und einen festen Border-Bottom mit unterschiedlichen Stärken anzuwenden. Durch die vertikale Positionierung der Spannen wird ein Effekt mehrerer Zeilen unter dem Text erzielt. Diese Methode erweitert jedoch nicht die Unterstreichung hinter dem Text.

HTML:

<p></p>

Lösung باستخدام box-shadow:

Eine Alternative Der Ansatz besteht darin, die Box-Shadow-Eigenschaft mit negativen Werten zu nutzen, um die Illusion einer dicken Unterstreichung hinter dem Text zu erzeugen. Durch Festlegen der Einfügungseigenschaft wird der Schatten nach innen geworfen, wodurch eine durchgezogene Linie unter dem Text entsteht.

CSS:

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

HTML:

<p>
  <span>A</span><span>B</span><span>C</span>
</p>

Diese Methode Erstellt effektiv eine dicke Unterstreichung hinter dem Text, ohne seine Grundlinienposition zu beeinflussen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS einen dicken Unterstreichungseffekt erzeugen, der sich hinter Text erstreckt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!