css ::after和::before详解

伪元素:before和:after添加的内容默认是inline元素

 <style>
     p:before{content: "hello "}
     p:after{content: "you are handsome!"}
 </style>
 <p>xx!</p>

等价于下面的html结构:
 <p>
     <span>hello </span>
     	xxx!
     <span> you are handsome!</span>
 </p>

content可以设置的内容

• 字符串，字符串作为伪元素的内容添加到主元素中
  注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出

• attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
  content: ‘\f127’ " Broken Image of " attr(alt);

• url()/uri(), 引用外部资源，例如图片；

• counter(), 调用计数器，可以不使用列表元素实现序号问题。

 <style>
     body {counter-reset:section;}
     h2:before { 
         counter-increment: section; 
         content: "Chapter"  counter(section) ".";
     }
 </style>
 
 <h2></h2>
 <h2></h2>

::before和::after特点

• 伪元素不属于文档，所以js无法操作它

• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click、hover等事件

• 无法为伪元素设置hover等伪类

• 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

• 基于伪元素的特点可以知道其优缺点，也引用别人文章的话：

• 优点
  减少dom节点数
  让css帮助解决部分js问题，让问题变得简单
  缺点

• 不利于SEO
  无法审查元素，不利于调试