css - 任何限制边框长度的方法？

Question

有没有办法限制边框的长度。我有一个 <div>有底部边框，但我想在 <div> 的左侧添加边框只延伸了一半。

有没有办法不在页面上添加额外的元素？

Answer 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: ""; 声明是呈现伪元素所必需的)