☰

境界線の長さを制限する方法はありますか? 質問する

tag-icon • tag-icon css
境界線の長さを制限する方法はありますか? 質問する

境界線の長さを制限する方法はありますか。 には<div>下部境界線がありますが、 の左側に、<div>上半分までしか伸びない境界線を追加したいと考えています。

ページに余分な要素を追加せずにこれを行う方法はありますか?

ベストアンサー1

CSS で生成されたコンテンツは、この問題を解決できます。

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

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

(注 -content: "";疑似要素をレンダリングするには宣言が必要です)

おすすめ記事