CSSボックスシャドウを使用してテキストの後ろに太い下線を作成する方法-CSSチュートリアル-php.cn

CSSボックスシャドウを使用してテキストの後ろに太い下線を作成する方法

Patricia Arquette

リリース： 2024-12-19 12:35:10

オリジナル

590 人が閲覧しました

How to Create a Thick Underline Behind Text Using CSS Box Shadow?

テキストの後ろに太い下線

テキストに下線を引くことは、Web デザインで使用される一般的なスタイル手法です。ただし、テキストの下に太くて目立つ線を作成するのは難しい場合があります。この問題は、テキストに下線を引くだけでなく、テキスト自体のすぐ後ろに下線を配置するという課題にも対処します。

[元の質問]

どのようにすれば、次のような下線を作成できますか?スパンと CSS を使用してテキストの後ろに表示されますか?

[改善されましたAnswer]

テキストの後ろに太い下線を付ける別の方法は、ボックスシャドウを使用することです。

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>
  <span>A</span><span>B</span><span>C</span>
</p>

ログイン後にコピー

このメソッドは、外観を与えるシャドウを作成します。テキストの位置や内容に影響を与えることなく、テキストのすぐ後ろに太い線を引きます。

以上がCSSボックスシャドウを使用してテキストの後ろに太い下線を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。