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

我只爱钱

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/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}`

阅读量:1

点赞量:0

问AI