css中的::after和::before已經被大量地使用在我們日常開發中了，使用他們可以使我們的文件結構更加簡潔。但是很多人對::after和::before仍不是特別瞭解，究竟他們是做什麼的？如何使用他們？什麼時候應該使用他們？筆者總結了一些對偽元素的理解和使用經驗。

一、概念：

1.定義

Thecss::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

從定義我們知道::before和::after匹配一個虛擬元素，主要被用於為當前元素增加裝飾性內容的。他顯示的內容是其自身的“content”屬性，預設是內聯元素。

其實::after和::before被引入css中，最核心的目的，還是為了實現語義化。在我們實際開發時候經常有這樣的經歷，為了實現一些效果，在文件中建立了一些沒有實際內容的節點，或者加入輔助樣式的文字，如：

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
</style>
<nav>
    <ul>
        <li>html 5</li>
        <li>|</li>
        <li>CSS3</li>
        <li>|</li>
        <li>JavaScript</li>
    </ul>
</nav>
 

顯示的時候是這樣子的：

很明顯，例子中的“|”僅是顯示時候用的間隔符，沒有實際的意義，而他所在的li元素僅是為了裝飾才被建立的，本是不應該被建立在文件內的。那麼能不能由樣式（css）去創建出節點把他們代替掉呢？

出於這樣的需求，就誕生了::after和::before，這兩個偽元素相當於是對當前元素的裝潢，他們並不是節點，不會出現在dom樹中，但是在顯示上具備節點的效果。我們使用::after和::before重構一下上邊的程式碼：

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
    li:not(:last-child)::after{
        content: "|";
    }
</style>
<nav>
    <ul>
        <li>html 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>
 

顯示效果沒有變化，但是文件結構變得清晰了多了。

2.使用

::after和::before的使用很簡單，可以認為其所在元素上存在一前一後的兩個的元素，這兩個元素預設是內聯元素，但我們可以為其增添樣式。::after和::before使用的時候一定要注意，必須設定content，否則這兩個偽元素是無法顯示出來的。而content屬性，會作為這兩個偽元素的內容嵌入他們中。如：

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>

顯示為完整的Hello World。

::after和::before是虛擬元素，不會影響真正元素的所在文件的位置，對:first-child或者:last-child這種偽類選擇不會造成影響。

3.操作

::after和::before是虛擬節點，而不是正在的節點，不在documont裡面找到對應Node物件，在之前的例子中，我們執行下列js程式碼：

console.log( document.querySelector("ul").childNodes)；

得到的是一個只有3個節點的NodeList物件，而兩個偽元素並不在物件中。因為::after和::before不是真正的節點，所以我們取不到他們，也不發設定點選等使用者事件。::after和::before雖然是不能設定事件，但還會捕獲使用者事件，並把事件“冒泡”到偽元素所在的元素上。之所以“冒泡”二字加了引號，是因為他不是真的冒泡，更準確的說::after和::before幫所在元素去捕獲去事件，事件的srcElement物件是偽元素所在的元素，而不是偽元素本身。

document不能獲取到::after和::before所對應的節點物件，但是可以通過css的介面獲取其樣式屬性，如：

window.getComputedStyle(
    document.querySelector('li'), ':before'
)

返回是個CSSStyleDeclaration物件，可以獲取當前的style值。

什麼是圖片字型？

類似於圖片的字型，在使用過程中，可以對其進行樣式的更改，而圖片有時候的樣式更改需要進行重新設計（變色，傾斜）

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

怎麼使用圖示字型？

下面給出IcoMoon 具體使用方法

1、開啟IcoMoon網站，點選IconMoon App。

2、開啟後是具體圖示的介面，可以自己新增自己的圖示進行生成，也可以選用他給出的圖示，在預設圖示的下方 會有add Icons From Library點選後可以看到更多的圖示供選擇（有免費的有付費的）。

3、點選Generate Font後會生成 當前選擇的圖示的介面，右下角的Generate Font 也會變成Download，也可以進行相關的下載設定（例如：讓其支援ie6/7之類的）。

4、下載完成後 會有以下檔案，這些檔案都最好儲存下來，不要隨意刪掉。

5、接下來給出圖示字型的具體使用方法（也可以自行看使用圖示字型的css檔案——style.css的相關內容）

（1）、將字型資料夾複製到專案中並且宣告字型，為什麼引入多個檔案，因為有些瀏覽器支援的格式不一樣（此處程式碼不需要記憶，因為基本上都一樣，直接複製即可）　　

@font-face {
           font-family: 'icomoon';/*宣告字型名稱，可自行設定，應用的時候對應即可*/
           src: url('fonts/icomoon.eot?lep7lm');
           src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?lep7lm') format('truetype'),
                url('fonts/icomoon.woff?lep7lm') format('woff'),
                url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');
           font-weight: normal;
           font-style: normal;
 }

（2）、使用字型　

.IconMoon {
     font-family: 'icomoon';
}

（3）、具體顯示對應圖示

使用css 偽元素選擇器before 來進行新增

<li><span>在這前面有一個home圖示</span></li>
<li><span>在這前面有一個smile2圖示</span></li>
<li><span>在這前面有一個tongue2圖示</span></li>
<li><span>在這前面有一個sad2圖示</span></li>
<li><span>在這前面有一個wink圖示</span></li>

對應的css程式碼為：

.icon-home:before {/*content的值是對應的圖示程式碼*/
           content: "\e900";
       }
       .icon-smile2:before {
           content: "\e9e2";
       }

       .icon-tongue2:before {
           content: "\e9e4";
       }

       .icon-sad2:before {
          content: "\e9e6";
       }

       .icon-wink:before {
           content: "\e9e7";

       }

（4）、正如之前所說，這些圖示本質上是字型，所以可以很方便的去改變顏色，大小，產生陰影效果等　

具體的程式碼如下

6、當我們想要給字型新增新的圖示或者減去一些圖示時，只需再次開啟網站，進入到IconMoon App頁面，然後點選Import Icons將之前我們下載的字型檔案目錄下的selection.json檔案，就可以在我們之前選中的基礎上再次進行操作了，用起來非常的方便。