スパンと CSS を使用してテキストの後ろに太い下線を作成するにはどうすればよいですか?

スパンと CSS を使用してテキストの後ろに太い下線を付けます

スパンと CSS を使用して、テキスト「ABC」の後ろに太い下線を作成したいとします。ネストされたスパンと色付きの枠線下部を使用して、テキストの下に下線を付けることはできましたが、テキストの後ろおよびテキストのベースラインの上に下線を配置するのに苦労しています。

これを実現する別のアプローチは次のとおりです。望ましい効果:

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>

以上がスパンと CSS を使用してテキストの後ろに太い下線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。