step 1-论CSS：before和：after

一、 首先来看看w3cschool上是怎么说的

①:before 伪元素在元素之前添加内容。

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

②:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

p:before

p:after

My name is Donald

I live in Ducksburg

很简单，就是在所选的元素前(:before)后(:after)加各种内容，内容写在(content:)中。

二、：before，:after内部的content还支持以下三种特性

①字符串[“可以是符号什么的也可以是单纯的字符” ,支持unicode编码!!]。

②属性[attr() , 可以获取标签上的元素属性,比如data-*的自定义属性,title,alt这些]

③引用媒体文件[url ,可以链接图片作为背景图什么的]。

灵活运用这两个可以做好多东东,比如清除浮动,各种额外的视觉效果[阴影,跳转等]。

三、效果

四、代码

https://blog.csdn.net/bomess/article/details/51206281

若有侵权请联系删除

椰奶西瓜Tech

没时间解释了，快长按左边二维码关注我呗～