在平时访问的页面中,都会有这种文字描述+icon的布局,下面介绍两种方法去实现:
使用<i></i>
标签实现:
<li class="item">
<a href="#" class="growth">
<i class="icon-growth"></i>
成长守护平台
</a>
</li>
.item a {
position: relative;
display: block;
}
.item .growth {
padding-left: 30px; // 给icon留位置
}
.item .icon-growth {
position: absolute;
width: 30px;
height: 30px;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
background: url(./img/top_sprite.webp) no-repeat -30px 0;
}
使用伪元素实现
<li class="item">
<a href="#" class="ranking">腾讯游戏排行榜</a>
</li>
.item a {
position: relative;
display: block;
}
.ranking {
padding-right: 25px; // 给icon留位置
}
.ranking::after {
content: "";
position: absolute;
top: 5px;
right: 3px;
width: 30px;
height: 30px;
background: url(./img/top_sprite.webp) no-repeat 0 0;
opacity: .1;
transform: rotate(90deg);
}
总结
上面两个办法都是可以实现效果的,需要注意的是元素设置position: absolute;
后脱离文档流,是不占位置的,需要给父元素设置relative
,并且设置对应的padding
给icon
留出位置