我一直在寻找这方面的解决方案,并在谷歌没有成功.
我想创建一个垂直线,其末端有点,沿线有几个.
img例如:
我怎样才能用css实现这个目标?
我可以做一个带间距的虚线,但我也不知道如何创建这条线,如果可能的话?
最佳答案
这是一个可以帮助您解决问题的快速代码段:
.bar {
list-style: none;
}
.bar >li {
position: relative;
}
.bar>li:before {
content: '\25CF';
margin-right: 10px;
font-size: 20px;
}
.bar>li:after {
position: absolute;
left: 0;
top: 0;
content: '';
border-left: 2px solid black;
margin-left: 5px;
height: 100%;
}
.bar >li:first-of-type:after {
top: 50%;
}
.bar >li:last-of-type:after {
top: -50%;
}
我们的想法是你使用一个列表,并且每个元素的项目符号都被替换为:Unicode black circle的符号前面,而每个元素:在元素的选择器之后包含元素的垂直线的份额.第一个和最后一个列表元素有一个额外的规则来截断它们的边界线,因此它不会超过黑色圆圈.
调整一下,以获得您想要的确切效果!
原文地址:https://www.jb51.cc/css/427391.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。