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

Thick Underline Behind Text with Spans and CSS

You want to create a thick underline behind the text "ABC" using spans and CSS. You've managed to achieve an underline below the text using nested spans with a colored border-bottom, but you're struggling to position it behind the text and above the text baseline.

Here's another approach to achieve the desired effect:

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>

The above is the detailed content of How Can I Create a Thick Underline Behind Text Using Spans and CSS?. For more information, please follow other related articles on the PHP Chinese website!