追加の HTML を使用せずに CSS 境界線の長さを制御するにはどうすればよいですか?

CSS を使用した枠線の長さのカスタマイズ

余分な要素を追加せずに枠線の長さを制限したいので、詳しく見てみましょう。これを適切に実現する CSS ソリューション。

要素の途中までしか延びない境界線を作成するには、 CSS で生成されたコンテンツを活用できます。その方法は次のとおりです。

HTML:

<div>Lorem Ipsum</div>

CSS:

div {
  position: relative;
}

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

この CSS スニペットでは、次のようになります。

• 位置: 親に対する相対位置div では、生成された境界線を完全に配置できます。
• content: "" は、カスタム境界線として機能する空の要素を作成します。
• background: black は、境界線の色を指定します。
• position:Absolute は、生成された要素を位置決め可能にします。
• bottom: 0 および left: 0 は、親の左下隅に境界線を配置します。 div.
• height: 50% は、境界線を親要素の高さの半分に制限します。

この手法では、左下隅から半分までしか延びない境界線が生成されます。追加の HTML 要素や兄弟セレクターを必要とせずに、div を編集できます。

以上が追加の HTML を使用せずに CSS 境界線の長さを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。