一个css样式的实现?-灵析社区

我只爱钱

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241217/f76be45db876f6b29ab7322e82317143.png) 这就是一个个元素，横向排列，里面的内容居中，设置"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}"