伪元素：before&after

：before和after的使用
1 “伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后
2. 必须有一个contnet属性来指定要插入的内容，可以为空
3. 文档中它不实际改变什么。相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控制。
4.伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
5.开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。

     #example:before {   
       content: "";   <!-- 在节点前面插入内容为空，有宽高的盒子-->
       display: block;   
       width: 100px;   
       height: 100px;   
     } 
      content: url(image.jpg);   <!-- content可以为图片-->
      a:after {   
        content: attr(href);   <!-- 获取属性-->
      }