Web前端开发资源网 - w3h5
尝试给元素添加伪类，但是一直不显示。
HTML：
<span class="before"> 我要前缀 </span> <p class="before"> 我要前缀 </p>
CSS：
.before:before{
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}显示效果：
浏览器控制台：
最后发现问题所在：伪元素要生效，必须添加 content 属性。
设置 content:""; 即可，推荐做法是用 fonticon ，content 里设置该图标的字体编码。
如果使用图片或者需要设置宽高，需要将伪类元素设置为 inline-block 或者 block ，并设置高宽。
.before:before{
content:"";
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}这样就可以正常显示了：
未经允许不得转载：Web前端开发资源网 - w3h5 » 给元素添加伪类 :before 不显示的解决方法
推荐阅读：
input[type=file]去掉“未选择任何文件”及样式改进
使用swiper的coverflowEffect遇到的几个问题