有没有办法限制边框长度？
有没有办法限制边框长度？
提问于 2010-11-09 15:56:25
有没有办法限制边框的长度。我有一个有下边框的<div>，但我想在<div>的左侧添加一个仅向上延伸一半的边框。
有没有办法做到这一点而不在页面上添加额外的元素？
回答 7
Stack Overflow用户
回答已采纳
发布于 2010-11-10 19:25:53
希望这能有所帮助：
#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>
Stack Overflow用户
发布于 2012-10-09 21:42:36
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: "";声明是必需的)
Stack Overflow用户
发布于 2013-05-18 23:29:23
The ::after pseudo-element rocks :)
如果你玩一点，你甚至可以设置你调整大小的边框元素居中显示，或者只有当它旁边有另一个元素时才显示(就像在菜单中一样)。下面是一个带有菜单的示例：
#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;
}
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
list-style: none;
}
#menu > ul > li + li::after {
content: "";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}<div id="menu">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4131490
复制相关文章
相似问题
腾讯云开发者
