记录下前端CSS样式表中的before伪元素用法

温馨提示:这篇文章已超过33天没有更新,请注意相关的内容是否还可用!

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

image.png

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

image.png

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

before伪元素添加方法

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

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

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

文字效果预览

image.png

OK,教程已结束,记录下以免下次用到,同时也给新手小白一丢丢帮助,喜欢的同学可以去尝试,多折腾,多收获,不怕出错就怕不出错.继续魔改自己的网站去啦~~~

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。