圆圈加数字的css

大大。2023-09-01 6:05

方式一

复制代码

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

  }