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

Dicke Unterstreichung hinter Text mit Spans und CSS

Sie möchten mit Spans und CSS eine dicke Unterstreichung hinter dem Text „ABC“ erstellen. Sie haben es geschafft, durch verschachtelte Bereiche mit einem farbigen Rand unten eine Unterstreichung unter dem Text zu erreichen, aber Sie haben Schwierigkeiten, sie hinter dem Text und über der Textgrundlinie zu positionieren.

Hier ist ein anderer Ansatz, um das zu erreichen gewünscht Wirkung:

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>

Das obige ist der detaillierte Inhalt vonWie kann ich mit Spans und CSS eine dicke Unterstreichung hinter Text erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!