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>
複製代碼

效果