一个css样式的实现?

作者站长头像
站长
· 阅读数 6

一个css样式的实现?

上图红框中的效果有没有什么方法能够用实现?

回复
1个回答
avatar
test
2024-06-26

answer image这就是一个个元素,横向排列,里面的内容居中,设置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}

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容