Div の境界線の長さをその幅よりも短くするにはどうすればよいですか?-CSSチュートリアル-php.cn

Div の境界線の長さをその幅よりも短くするにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-18 17:18:11

オリジナル

320 人が閲覧しました

How Can I Keep a Div's Border Length Shorter Than Its Width?

Div 幅内で境界線の長さを維持する

特定のシナリオでは、要素の境界線の幅が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: 100px;
  border-bottom: 1px solid magenta;
}

ログイン後にコピー

この例では、:before セレクターを使用して疑似要素を作成します。疑似要素は div の左下隅に配置され、div の幅よりも小さい 100px の幅が与えられます。次に、マゼンタの境界線を疑似要素に適用し、元の div 幅を維持しながら、div 幅より短い境界線の錯覚を作成します。

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