有沒有辦法限制邊框的長度。我有一個<div>具有底部邊框的，但是我想在的左側(cè)添加一個邊框，該邊框<div>僅向上延伸一半。有沒有辦法在頁面上不添加額外元素的方法？
3 回答
瀟瀟雨雨
TA貢獻1833條經(jīng)驗 獲得超4個贊
希望這可以幫助：
#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>
慕村225694
TA貢獻1880條經(jīng)驗 獲得超4個贊
CSS生成的內(nèi)容可以為您解決此問題：
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: "";為了使偽元素能夠呈現(xiàn)，聲明是必需的）
慕尼黑5688855
TA貢獻1848條經(jīng)驗 獲得超2個贊
該:after巖石:)
如果您玩了一點，甚至可以將調(diào)整大小的邊框元素設(shè)置為居中顯示，或者僅在旁邊有另一個元素時才顯示（如菜單中所示）。這是帶有菜單的示例：
#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;
}
添加回答
舉報
0/150
提交
取消