html预览不出效果是怎么回事,css before显示不出来怎么办

不出效果是怎么回事,css before显示不出来怎么办"/>

html预览不出效果是怎么回事,css before显示不出来怎么办

before是css中的伪类元素，使用它可以在元素之前插入新的内容。有时我们使用伪类before元素时会遇到无法显示的情况，下面就来说说怎么解决这个问题吧。

css before显示不出来怎么办

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

下面以一个案例讲解：

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

HTML：

我要前缀

我要前缀

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(), 调用计数器，可以不使用列表元素实现序号问题。

本文来自css3答疑栏目，欢迎学习！