css步骤箭头样式 |css 只显示3行文字

// HTML 代码：
<ul class="step-list"><li>Step 1</li><li>Step 2</li><li>Step 3</li></ul>// CSS 代码：
.step-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.step-list li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: #ccc;
}
.step-list li:first-child:before {
background-color: #000; // 改变第一个步骤箭头的颜色
}
.step-list li.active:before {
background-color: #f00; // 改变当前步骤箭头的颜色
}
// 说明：
1. .step-list 设置步骤列表的样式，包括去掉默认列表样式、padding和margin
2. .step-list li:before 设置每个步骤箭头的样式，包括形状、大小、间距和背景颜色
3. .step-list li:first-child:before 修改第一个步骤箭头的颜色
4. .step-list li.active:before 修改当前步骤箭头的颜色，需要在HTML中的li标签上添加class属性，如<li class="active">Step 1</li>

以上代码可以实现一个简单的步骤箭头，通过修改颜色和样式可以满足不同的设计需求。同时，也可以使用其他图标或字体库来代替CSS绘制的箭头，例如Font Awesome、Material Icons等。