记录前端CSS样式表中伪元素的content属性如何使用中文字符集

温馨提示:文章已超过1130天没有更新,可能存在链接失效,相关教程仅供参考

在逛别人的博客网站的时候发现他们文章内容中有普通标题温馨提示框,感觉挺美观好看的,如图是不是感觉很美观呢?

image.png

于是抱着喜欢的学习的态度打开浏览器的F12开发者工具控制台调试定位到温馨提示处,发现原来也是使用::before 伪元素实现的

那就好办啦开搞,在content: ""; 属性中输入中文,可是就是不显示,打开了css样式表,定位到content属性处发现里面的值是"\6e29\99a8\63d0\793a",很好奇这个是什么值呢?百度了下发现原来是unicode编码,简单写个教程记录下以免下次忘记怎么使用!同时也给需要同学提供一丢丢帮助。

content属性如何使用中文字符集

1、使用工具将中文转换成unicode  Unicode编码转换 - 站长工具 

输入要转换的中文,然后点击中文转Unicode

image.png

2、复制转换后的unicode值,粘贴到content: ""; 属性中,如下

写到CSS样式表里面需要把 u 去掉

p.putong::before {
    content: "\6e29\99a8\63d0\793a";
}

image.png

OK,教程已结束,记录下以免下次用到,同时也给新手小白一丢丢帮助,继续魔改自己的网站去啦~~~

© 除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处

取消
微信二维码
微信二维码
支付宝二维码