我正在尝试在我的圆圈之间添加线条,我已将 ::after
添加到 css,但它只显示第一个圆圈的线条,为什么它不适用于每个圆圈?
.segments > .item {
display: flex;
}
.circle::after {
content: '';
background: grey;
height: 5px;
width: 50px;
position: absolute;
left: 0;
top: 20px;
z-index: -1;
}
.circle {
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
background: red;
display: grid;
place-items: center;
margin: 20px;
}
<div class="segments">
<div class="item">
<div class="circle">
test
</div>
<div class="circle">
test
</div>
<div class="circle">
test
</div>
<div class="circle">
test
</div>
</div></div>
答案 0 :(得分:1)
将 position: relative
设置为 .circle
为了使其能够包含绝对 ::after
子元素 - 或者换句话说,使绝对元素与第一个非静态定位父元素相关:
.segments>.item {
display: flex;
}
.circle {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
background: red;
display: grid;
place-items: center;
margin: 20px;
}
.circle::after {
content: '';
background: grey;
height: 5px;
width: 50px;
position: absolute;
left: 0;
top: 20px;
z-index: -1;
}
<div class="segments">
<div class="item">
<div class="circle">test</div>
<div class="circle">test</div>
<div class="circle">test</div>
<div class="circle">test</div>
</div>
</div>