CSS で生成されたコンテンツは、Web レイアウトで柔軟な境界線の長さをどのように作成できますか?

柔軟な枠線の長さの制御

Web レイアウトをデザインするとき、特定の要素の枠線の長さを制御する必要が生じることがよくあります。ページに追加の要素を追加することでこれを実現できますが、CSS の強力な生成コンテンツ機能を使用する、より洗練されたソリューションがあります。

次のシナリオを考えてみましょう。

があるとします。既存の下枠があり、要素の中点までのみ伸びる枠を左側に追加したいと考えています。

CSS ソリューション:

この課題に対処するには, CSS で生成されたコンテンツが役に立ちます。仕組みは次のとおりです:

div {
  position: relative;
}

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

1. コンテナの位置:
   の位置を相対に設定して、生成されたコンテンツの参照フレームを確立します。
2. 境界線を作成します: div:after 内疑似要素では、コンテンツ プロパティを使用して空白スペースを生成し、それに黒の背景色を割り当てます。
3. 境界線の位置とサイズ: 境界線内に配置するには、位置を絶対に設定します。容器。左下隅に配置するには、bottom プロパティと left プロパティを使用します。高さを 50% に設定すると、長さがコンテナの高さの半分に制限されます。垂直境界線を作成するには、幅が 1px に設定されます。

CSS で生成されたコンテンツを利用すると、追加の要素を作成せずに境界線を追加または変更でき、レイアウトの柔軟性とコードの保守性が向上します。