CSS伪元素：before和：after详解与妙用
定义
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。默认地，这两个个伪元素是行内元素，不过可以使用属性 display 改变这一点。其实这个前后也只是个概念而已，灵活运用这两个“帮手”，可以简化很多实现，以及很多有趣的实现。
特性
不占用DOM节点，简化DOM节点数，自然js也无法操作。
用在块级元素以及大部分的行级元素。但是比如img等替换元素元素，就得看怎么用了，比如图片资源加载失败也是能使用的。
伪元素被点击的时候触发的是主元素的 click 事件。
不利于调试，也不利于SEO。
使用
CSS3使用双冒号::和伪类的单冒号区:分开来。浏览器也接受由CSS 2 引入的 :before 写法。::before和::after需要使用content属性指定要插入的内容。content必须有值（空值也行）。content插入的内容默认是 inline 元素，可以通过display:block改变
content的值有以下几种情况：
空值
字符串：作为伪元素的内容添加到主元素中
attr(attr_name) ：取得主元素的属性值
url()或者uri(): 引用外部资源
counter(): 实现序号功能
常见使用场景
清除浮动
利用伪类实现简单图标
在这里插入图片描述
扩大可点击区域
轻松实现聊天框
如图
6.元素 hover 特效
7.元素间隔效果 ,使用:not排除掉最后一个元素
8，实现一些标签对placeholder的支持
以上就是简单分享，有更多的使用技巧欢迎评论区留言讨论。
点在看，让更多看见。
赞 (0)