css 僞類::after ::beftor 的使用方式

註釋：對於 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個經常使用"content"配合使用，見過最多的就是清除浮動。

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
 .clearfix:after {clear: both;}
 .clearfix {zoom: 1;}

從我36級轉72級英語翻譯出來能夠看出before與after是以前與以後的意思。
那麼就是一個是插入以前，一個是插入以後了。

對以上就是w3school裏面的圖，你懂了吧。
:before 選擇器在被選元素的內容前面插入內容，要使用 content 屬性來指定要插入的內容。

設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用，而且必須定義content屬性
CSS3將僞對象選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改成雙冒號(::)用以區別僞類選擇符.

IE10在使用僞元素動畫有一個問題：

例如：

>.test:hover {}
>.test:hover::before { /* 這時animation和transition才生效 */ }