CSS を使用して Div の幅より小さい境界線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して Div の幅より小さい境界線を作成するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-15 11:17:10

オリジナル

264 人が閲覧しました

How Can I Create a Border Smaller Than My Div's Width Using CSS?

Div 幅未満の境界線: 疑似要素を使用した解決策

HTML と CSS では、div 要素の寸法は、 width プロパティ。境界線のサイズは、border プロパティを使用して設定できます。ただし、div の幅より小さい境界線を設定したい場合は、直接的なアプローチでは十分ではありません。

解決策の 1 つは、CSS 疑似要素を使用することです。 :before 疑似要素を div に追加し、絶対的に配置できます。これにより、div の下部から拡張し、必要な幅だけの要素を作成できます。

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%; /* or 100px */
  border-bottom: 1px solid magenta;
}

ログイン後にコピー

このアプローチでは、効果的に div の下部に :before の width プロパティで指定された幅だけの境界線を作成します。擬似要素。

以上がCSS を使用して Div の幅より小さい境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。