效果
代码
<div class="care-circle">
<p>关爱圈</p>
<p>
<em>20</em>
<span>获得的赞</span>
<i></i>
<em>245</em>
<span>收到的评论</span>
</p>
</div>
.care-circle {
display: flex;
align-items: center;
width: 6.9rem;
height: 0.56rem;
font-size: 0.24rem;
background-color: rgba(0, 59, 137, 0.03);
border-radius: 0.28rem;
position: relative;
}
p:nth-of-type(2) {
display: flex;
align-items: center;
position: absolute;
right: 0.21rem;
color: #999999;
em {
color: #34b2da;
margin-right: 0.1rem;
}
i {
width: 0.02rem;
height: 0.35rem;
border-left: 1px solid #d8d8d8;
margin: 0 0.1rem;
}
}