您的位置：首页 > Web前端 > CSS

伪元素使用的一点儿小技巧

2017-08-09 21:30 267 查看

备注：个人项目中用到

介绍

一些文章网站可能会记录一篇文章的浏览次数、阅读次数、收藏次数，上面的小图片该如何布局呢，这提供一种解决思路，使用伪元素布局，效果如下：

实现

经常使用的伪元素有::before ， ::after等，这里使用::before，部分代码：

html

<div>
<span class="iconfont_love"><a></a></span><span>0</span>
<span class="iconfont_browse"><a></a></span><span>0</span>
<span class="iconfont_collection"><a></a></span><span>0</span>
</div>

css

div span{
vertical-align: center;
margin-right:7px;
display: inline-block;
height:20px;
}

div span a{
text-decoration: none;
display: inline-block;
position: relative;
top:4px;
}

div .iconfont_love a::before {
content:"";
background:url(../images/love.svg);
display: inline-block;
width:20px;
height:20px;
background-size: 100% 100%;
}

div .iconfont_browse a::before{
display: inline-block;
content:"";
background: url(../images/browse1.png);
width:20px;
height:20px;
background-size: 100% 100%;
}

div .iconfont_collection a::before{
display: inline-block;
content:"";
background:url(../images/collection.svg);
width:20px;
height:20px;
background-size: 100% 100%;
}

注意点

注意点一：在给伪元素设置background:url(…)后，需要设置background-size才能显示图片。

注意点二：为伪元素设置相对定位来控制伪元素的位置和对齐方式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 布局图片伪元素 css

相关文章推荐

新的分享

章节导航