CSS を使用してテキストの背後に伸びる太い下線効果を作成するにはどうすればよいですか?

CSS とスパンを使用してテキストの後ろに太い下線を作成する

提供された画像に見られる太い下線効果を実現するには、スパンの組み合わせおよび CSS プロパティを使用できます。

ソリューションborder-bottom:

主なアプローチには、文字ごとにネストされたスパンを作成し、さまざまな太さのソリッドの border-bottom を適用することが含まれます。スパンを垂直に配置することで、テキストの下に複数の行が表示される効果が得られます。ただし、この方法ではテキストの後ろの下線は拡張されません。

HTML:

<p></p>

解決策 box-shadow:

代替案このアプローチは、box-shadow プロパティを負の値で利用して、テキストの後ろに太い下線のような錯覚を作成することです。 inset プロパティを設定すると、影が内側に投影され、テキストの下に実線が作成されます。

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 サイトの他の関連記事を参照してください。