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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180822G1MCGS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券