有什么办法限制边框长度吗？

Question

有没有办法限制边框的长度。我有一个<div>具有底部边框的，但是我想在的左侧添加一个边框，该边框<div>仅向上延伸一半。有没有办法在页面上不添加额外元素的方法？

Answer 1

希望这可以帮助：

#mainDiv {

  height: 100px;

  width: 80px;

  position: relative;

  border-bottom: 2px solid #f51c40;

  background: #3beadc;

}

#borderLeft {

  border-left: 2px solid #f51c40;

  position: absolute;

  top: 50%;

  bottom: 0;

}

<div id="mainDiv">

  <div id="borderLeft"></div>

</div>

Answer 2

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;

}

（注意- content: "";为了使伪元素能够呈现，声明是必需的）

Answer 3

该:after岩石:)

如果您玩了一点，甚至可以将调整大小的边框元素设置为居中显示，或者仅在旁边有另一个元素时才显示（如菜单中所示）。这是带有菜单的示例：

#menu > ul > li {

    position: relative;

    float: left;

    padding: 0 10px;

}

#menu > ul > li + li:after {

    content:"";

    background: #ccc;

    position: absolute;

    bottom: 25%;

    left: 0;

    height: 50%;

    width: 1px;

}