通过伪元素使用iconfont
1.content:' ';
2.font-family: "iconfont" !important;
3.color
伪元素多类名设置
结构 给父元素设置多类名
<div class="pic jingxingzhong weishoucang">
<img src="../04-FC-待完成/uploads/item_2.png" alt="">
</div>
图片盒子样式设置 (父元素相对定位)
.pic {
width: 100%;
height: 160px;
position: relative;
}
伪元素通用样式设置
.pic::after {
content: '';
//子元素绝对定位
position: absolute;
left: 20px;
top: -5px;
margin-left: 0px;
margin-bottom: 135px;
// 盒子宽高
width: 68px;
height: 29px;
//文字与图片样式设置
font-size: 12px;
color: #FFFFFF;
text-align: center;
padding-top: 5px;
background-size: 68px 29px;
background-repeat: no-repeat;
单独设置特殊样式
.jingxingzhong::after {
content: '进行中' !important;
background-image: url(../images/status_active.png);
}