before 是 CSS 中的伪类元素, 使用它可以在元素之前插入新的内容. 有时我们使用伪类 before 元素时会遇到无法显示的情况, 下面就来说说怎么解决这个问题吧.
CSS before 伪类元素要显示, 需要设置 content 属性, 而且要具有一定的宽高, 可以设置 display 为 inline-block 和 block, 让元素的宽高生效.
下面以一个案例讲解:
问题: 尝试给 span 元素添加伪类, 让它前面显示正方形, 但是一直不显示.
html:
<span class="before">
我要前缀
- </span>
- <p class="before">
我要前缀
- </p>
- CSS:(相关课程推荐: CSS 视频教程 https://www.html.cn/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 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15060.html