CSSを使用してテキストの後ろに太い下線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-24 02:33:14

オリジナル

410 人が閲覧しました

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

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

スパンと CSS を使用してテキストの後ろに太い下線の効果を実現するには、次の方法があります。使用できるテクニックはいくつかあります:

オプション 1: ネストスパン

このアプローチでは、一連のスパンをネストし、それぞれの下の境界線のサイズと色を増やします。

<p>

ログイン後にコピー

オプション 2: ボックスシャドウ

もう 1 つのオプションは、ボックスシャドウを使用して下線:

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

ログイン後にコピー

<p>
  ABC

ログイン後にコピー

これらのメソッドを使用すると、テキストの背後 (ベースラインの上または下) に太い下線があるかのような錯覚を作成できます。

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