一、 首先来看看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
没时间解释了,快长按左边二维码关注我呗~
领取专属 10元无门槛券
私享最新 技术干货