一个css样式的实现?

Question

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

Answer 1

找找你用的 UI 框架的 Step 步骤条
如果你没用 UI 框架纯手写原生的话，当我没说

纯 CSS 手写的话自找麻烦，重复造轮子 ...

Answer 2

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