圆圈加数字的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;
}
<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;

  }
相关推荐
秦jh_6 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21319 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy20 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法