Hello! 欢迎来到小浪云数据!

如何使用 CSS 实现多个水平排列且内容居中,并带有横线和圆圈的元素集合?


如何使用 CSS 实现多个水平排列且内容居中,并带有横线和圆圈的元素集合?

实现上方图片中的效果

问题:如何使用 CSS 实现图片中红框中的效果?

答案:

这是一个由多个水平排列的元素组成的元素集合,每个元素中的内容居中。可以使用 text-align: center 来设置内容居中。

立即学习前端免费学习笔记(深入)”;

难点在于上面的横线。虽然使用边框线是最简单的,但第一个和最后一个元素会出现一半的缺失。这时,我们需要使用伪元素来隐藏这一部分。使用 ::before 伪元素可以创建横线,并设置宽度为父元素的宽度,如 left: 0; right: 0;。

第一个和最后一个元素的伪元素需要缩小一半。可以使用 :first-child::before{left: 50%;} 和 :last-child::before{right: 50%;} 来设置。

可以使用另一个伪元素 ::after 来创建圆圈,并将其靠上居中。对于偶数个圆圈,可以使用 :nth-child(2n)::after{color: xxx} 来更改其颜色。

相关阅读