css 如何画直线两端有圆点

CSS如何画直线两端有圆点呢？我们可以通过伪元素来实现这个效果。

.line-dot {
         position: relative;
         display: block;
         width: 100%;
         height: 1px;
         background: #ccc;
}
.line-dot::before,.line-dot::after {
         content:"";
         position: absolute;
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: #ccc;
         top: -3.5px;
}
.line-dot::before {
         left: 0;
}
.line-dot::after {
         right: 0;
}
    

其中，我们将.line-dot元素设置成相对定位，并设置宽度为100%、高度为1px、背景色为#ccc，就可以得到一条灰色的直线了。

接下来，我们利用伪元素before和after来添加两个圆点。它们的大小、圆角、背景色等样式通过CSS进行设置。position设置为absolute，使它们从.line-dot元素中脱离，left和right设置为0，使它们分别位于直线的两端。

这样，我们就成功地用CSS画出了两端带圆点的线。

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