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

Question

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

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

Answer 1

希望这可以帮助：#mainDiv {&nbsp; height: 100px;&nbsp; width: 80px;&nbsp; position: relative;&nbsp; border-bottom: 2px solid #f51c40;&nbsp; background: #3beadc;}#borderLeft {&nbsp; border-left: 2px solid #f51c40;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; bottom: 0;}<div id="mainDiv">&nbsp; <div id="borderLeft"></div></div>

Answer 2

CSS生成的内容可以为您解决此问题：div {&nbsp; position: relative;}&nbsp;/* Main div for border to extend to 50% from bottom left corner */div:after {&nbsp; content:"";&nbsp;&nbsp; background: black;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp; bottom: 0;&nbsp;&nbsp; left: 0;&nbsp;&nbsp; height: 50%;&nbsp;&nbsp; width: 1px;}（注意- content: "";为了使伪元素能够呈现，声明是必需的）

Answer 3

该:after岩石:)如果您玩了一点，甚至可以将调整大小的边框元素设置为居中显示，或者仅在旁边有另一个元素时才显示（如菜单中所示）。这是带有菜单的示例：#menu > ul > li {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 0 10px;}#menu > ul > li + li:after {&nbsp; &nbsp; content:"";&nbsp; &nbsp; background: #ccc;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 25%;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; height: 50%;&nbsp; &nbsp; width: 1px;}