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

德顺

发布于 2019-11-13 17:24:22

10.4K0

发布于 2019-11-13 17:24:22

文章被收录于专栏：前端资源前端资源

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

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

这样就可以正常显示了：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-06-07)，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度