CSS で部分的な境界線を作成するにはどうすればよいですか?

CSS の部分的な境界線: クリエイティブな錯覚

特定の側にのみ表示される、または延長のみに境界線を含むボックスを作成することが望ましい場合があります。エッジを部分的に横切る。 CSS には直接サポートがないにもかかわらず、この効果はシンプルで柔軟な方法でエレガントに実現できます。

たとえば、幅 350 ピクセルのボックスの下の境界線が左から 60 ピクセルしか伸びていない場合を考えてみましょう。これは次の CSS コードで再現できます:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

魔法は div:after 疑似要素にあります。メインボックスの絶対一番下に空のボックスを作成します。幅と下部のプロパティを調整することで、部分的な境界線のサイズと位置を制御できます。

このアプローチは汎用性が高く、最新のすべてのブラウザーで適切に機能します。追加のマークアップは必要ないため、コードがクリーンで保守しやすくなります。また、position:Absolute をサポートしていないブラウザでも正常に機能が低下します。

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