圆圈加数字的css

 方式一

.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;
}

 方式二

.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;
}

 下面是使用案例

                                

                                  
 {{item.remark}}: {{item.userName}}
                                
                              

 .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;

  }