CSS:after和CSS:before选择器插入内容怎么同时使用图标、空格和文字

燕山网络科技2022-06-03373

实现效果如下代码:

.instructions{ font-family: 'zblog' !important; }
.instructions::after{content:"\ec94\ \使用帮助";}

其中,font-family: 'zblog' !important;是引用的字体库,ec94是图标编码,\ \中间是空格,接着是文字"使用帮助"。

在前端的显示效果如下图所示:

CSS:after和CSS:before选择器插入内容怎么同时使用图标、空格和文字 CSS选择器 建站  第1张

在我的网站中完整的css代码如下:

.instructions{ border-top:1px solid #3a6ea5 ;background:#f4f4f4; padding:10px 15px;margin:10px 0;font-size:12px;max-width: 600px;color:#555555;position: relative;font-family: 'zblog' !important; }
.instructions::after{content:"\ec94\ \使用帮助";position:absolute;bottom:0;right:0;padding:0 15px 5px 0;color:rgb(175 175 175 / 40%)}


本文链接:https://www.hnysnet.com/wangzhan/4733.html 转载需授权!

分享到:

网友评论

最新发布

燕山网络科技在线咨询

上班时间:9:00-22:00
周六、周日:14:00-22:00
wechat
扫一扫二维码,添加客服微信

15639981097

上班时间:9:00-22:00
周六、周日:14:00-22:00

扫一扫二维码,添加客服微信