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>
複製程式碼

效果