ホームページ > ウェブフロントエンド > CSSチュートリアル > Div の幅よりも短い境界線を作成するにはどうすればよいですか?

Div の幅よりも短い境界線を作成するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-04 20:31:10
オリジナル
896 人が閲覧しました

How Can I Create a Shorter Border Than My Div's Width?

境界線の長さが Div 幅より浅い

コードでは、幅 200 ピクセルの div 要素と、その下部に沿って実線の 1 ピクセルのマゼンタの境界線を定義しています。角。ただし、div の幅を変更せずに、この境界線の長さを 100 ピクセルに制限する方法を探します。

疑似要素が解決策を提供します。疑似要素は DOM ツリーに追加される要素で、これを使用して既存の要素の一部をスタイル設定できます。この例では、境界線として機能する疑似要素を作成できます。

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}
ログイン後にコピー

この疑似要素は、div の絶対左下に位置し、必要な境界線の長さ 100 ピクセルを複製します。 width プロパティを調整することで、div 自体の幅に影響を与えることなく、境界線の長さを簡単に制御できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート