我想在ul中使用li元素实现故事情节的视觉布局,这看起来像这样：
li-element1
.
.
li-element2
.
.
li-element3
我使用:: before伪元素在整个ul元素中添加一行,但它在li元素的顶部可见,我不想发生这种情况.如何将线隐藏在lis后面,只能在边距间隙中看到？我已经尝试过Z-index属性但未成功.这是我目前的代码link to a pen.
.container ul{
position: relative;
}
.container ul::before{
content: "";
position: absolute;
top: 0px;
bottom: 0px;
border: 1px dashed blue;
}
.container ul li{
margin: 15px;
}
更新
在最初的问题中,我忽略了这样一个事实,即li元素中的子弹实际上并不是li元素本身的一部分,因此实际上并没有受到任何背景颜色的影响.现在考虑到这一点并实现建议的答案,结合使用z-index,背景颜色,边距和填充,另外设置ul list-style-type：none我已经将代码更新为：
.container ul{
padding: 0px;
margin: 0px;
position: relative;
list-style-type: none;
}
.container ul::before{
content: "";
position: absolute;
top: 0px;
bottom: 0px;
left: 16px;
border: 1px dotted red;
}
.container ul li{
margin: 15px;
padding: 0px 0px;
position: relative;
z-index: 1;
background-color: white;
}
最佳答案
您可以使用白色背景,填充和相对定位来隐藏每个项目的时间轴部分：
.container ul{
position: relative;
}
.container ul::before{
content: "";
position: absolute;
top: 0px;
bottom: 0px;
border: 1px dashed red;
}
.container ul li {
display: block;
position: relative;
left: -20px;
background-color: white;
padding: 5px;
padding-left: 20px;
margin: 40px 0px;
}
