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

  }
相关推荐
qq_364371723 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象4 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥5 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿7 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡8 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎