css 列表竖线上加圆点

CSS 中实现列表竖线上加圆点效果非常简单，只需要利用 CSS 的伪元素和 background 属性即可实现。

li {
        position: relative;
        list-style-type: none;
}
li::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        top: 50%;
        left: -14px;
        transform: translateY(-50%);
}
    

以上代码中，利用了伪元素 ::before 创建了一个圆点。利用 position: absolute 定位到列表项的左侧，同时利用 left 和 transform 属性让它与竖线对齐。利用 background 属性设置圆点的颜色。

在列表项的样式中，需要设置 list-style-type: none，将默认的列表小方块去除。

这样，就可以实现列表竖线上加圆点的效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！