在逛别人的博客网站的时候发现他们文章中H标题前面都有个符号“#”感觉挺好看的，如图是不是感觉很美观呢？

于是抱着喜欢的学习的态度打开浏览器的F12开发者工具控制台调试定位到H标题处，获取了 content: "#"; 这个值，急忙把它加载了H标题的CSS样式表里面，但是不管加在开头还是结尾都不生效。研究了好久（谁叫自己是前端小白呢！）。偶然间在H标题标签中发现了“ ::before ” 一个元素如图

一开始还不懂，百度搜索了下 css before 是什么才知道原来这个是个css伪元素，用于在某个元素样式之前添加内容，跟它一起配套的的还有一个弟弟 ”after“ 伪元素用于在某个元素样式之后添加内容，好了废话不多说。魔改完H标题后简单写个教程记录下以免下次忘记怎么使用！同时也给需要同学提供一丢丢帮助吧

before伪元素添加方法

找到你的H标签样式复制，例如站长的标签样式命名为h2，那么复制一份后清空标签样式里面的内容，然后吧标签命名改成“ .h2:before”然后填写如下内容

PS：content为设置要显示的伪元素内容，padding-right为填充的伪元素离元素间距（还有很多的参数有兴趣的小伙伴可以在去加上其他的参数例如颜色图标文字大小等等，这边就简单的介绍下如何添加 # 在标题前面）

.h2:before {
    content: "#";
    padding-right: 5px;
}

文字效果预览

OK，教程已结束，记录下以免下次用到，同时也给新手小白一丢丢帮助。