css3伪元素选择器before 和 after 的使用

:before 的做用, 在子元素的最前面, 添加一个伪元素, 伪元素内容经过 content 控制,能够在content属性中写入文本内容，可是一般为空字符串。
:after 的做用, 在子元素的最后面, 添加一个伪元素, 伪元素内容经过 content 控制,能够在content属性中写入文本内容，可是一般为空字符串。

before 和 after 使用注意点:
    1. 必须设置 content
    2. 默认是行内元素
        若是要设置大小, 须要转换显示模式
        display: block/inline-block;
        或者定位position: absolute/fixed;       
    3. before 和 after 都是伪元素, 不是真实存在的元素, 不能添加 hover
  且 不能经过 js 进行获取

   before 和 after 的使用场景:
    1. 清除浮动  
    2. 添加遮罩层 或者 添加小图标
复制代码

1.清除浮动

.clearfix:after {
  content: "";
  display: block;
  /* 清除浮动元素形成的影响 */
  clear: both; 
  height: 0;
  line-height: 0;
  visibility: hidden;
}
复制代码

2.添加小图标
css代码

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }
  ul {
     width: 400px;
     height: 50px;
     border: 1px solid #000;
     margin: 150px auto ;
     text-align: center;
 }
  ul li {
     width: 25% ;
     height: 50px;
     list-style: none ;
     border: 1px solid #000;
     text-decoration: none ;
     float: left;
     line-height: 50px;
     position: relative;
 }
  .new:before {
     content: '' ;
     width: 36px;
     height: 23px;
     position: absolute ;
     top:0px ;
     right: 0px;
     background-image: url('./images/icon.png');
 }
</style>
复制代码

效果