给元素添加伪类 :before 不显示的解决方法

给元素添加伪类 :before 不显示的解决方法 HTML笔记 第1张

尝试给元素添加伪类,但是一直不显示。

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);
}

显示效果:

给元素添加伪类 :before 不显示的解决方法 HTML笔记 第2张

浏览器控制台:

给元素添加伪类 :before 不显示的解决方法 HTML笔记 第3张

最后发现问题所在:伪元素要生效,必须添加 content 属性。

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

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

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

这样就可以正常显示了:

给元素添加伪类 :before 不显示的解决方法 HTML笔记 第4张

给元素添加伪类 :before 不显示的解决方法 HTML笔记 第5张


未经允许不得转载:Web前端开发资源网 » 给元素添加伪类 :before 不显示的解决方法

推荐阅读:

程序员应该掌握的600个英语单词

jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)

phpsStorm实现打开*.jsp文件代码高亮和代码格式化

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

2018年4月24日 服务器换成腾讯云

赞 (12)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)