css before显示不出来怎么办

css before伪类元素要显示，需要设置content属性，而且要具有一定的宽高，可以设置display为inline-block和block，让元素的宽高生效。

下面以一个案例讲解：

问题：尝试给span元素添加伪类，让它前面显示正方形，但是一直不显示。

HTML：

<span class="before">
我要前缀
</span>
<p class="before">
我要前缀
</p>

CSS：（相关课程推荐：css视频教程）

.before:before{
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}

显示效果：

浏览器控制台：

解决方法：我们可以看见页面中并没有出现before元素，这是因为伪元素要生效，必须添加 content 属性。

设置 content:""; 即可，推荐做法是用 fonticon ，content 里设置该图标的字体编码。

如果使用图片或者需要设置宽高，需要将伪类元素设置为 inline-block 或者 block ，并设置高宽。

.before:before{
content:"";
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}

这样就可以正常显示了：

content属性知识扩展

content有四种可以写进去的东西：attr(attr-name)、字符串、url()/uri()、counter()

attr(attr-name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值

好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。

url()/uri(), 引用外部资源，例如图片；

counter(), 调用计数器，可以不使用列表元素实现序号问题。