方式一

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
}
.circle::before {
content: attr(data-number);
display: block;
}
<div class="circle" data-number="1"></div>
<div class="circle" data-number="2"></div>
<div class="circle" data-number="3"></div>

 方式二

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
}
.circle::before {
content: "1";
display: block;
}

 下面是使用案例

<div class="green_list flex_align" v-for="(item,index) in StepReviewLogs.logs":key="item.id"><div class="flex_align"><div class="circle" :data-number="index+1"></div> {{item.remark}}: {{item.userName}}</div></div>

 .circle {width: 14px;height: 14px;border-radius: 50%;/* background-color: #67C23A; */border: 1px solid #67C23A;color: #67C23A;display: flex;justify-content: center;align-items: center;margin: 0px 3px;font-size: 12px;}.circle::before {content: attr(data-number);display: block;margin-left: 1px;}.green_list {color: rgba(103, 194, 58, 1);}.flex_align {display: flex;align-items: center;}