今天我想說一下偽類當中的:before和:after, 這兩位仁兄一前一後的作用，真是不容小覷哈，除了常見的清除浮動，還可以做一些邊角動畫，後面還發現配合display還可以非常神奇的佈局，尤其是解決解析度多樣的移動端定位問題，非常有效，用得好就不用JavaScript來控制了。不過在談偽類妙用之前，我們先來說說電商專題的主題板塊圖片的一些設計和重構方式。用css的偽類巧妙佈局電商專題的主題文字，對文案包容性特別強，適合拓展，非常經典的冷門技法！

《一》

1. 像上面兩種設計方式，文案和裝飾元素都有一定的變化，其中文案的字型還尤為藝術。重構這類設計的時候，基本要把各個板塊都切出來，如下圖所示。這種方式有一個不好的地方就是增加了http請求，電商的一個專題頁商品那麼多，這都還沒有放商品圖片，就有7～8張圖片需要載入了，這樣會導致網頁開啟較慢。

2. 對於這種多圖片的，重構頁面一般用img圖片標籤還原設計，方式如下所示，當然用背景的方式也可以，只不過那樣需要寫具體的高度，就會麻煩一點。

《二》

1. 下面這種設計是裝飾元素不變，變的是文案，如果這裡文案用常規字型，那就是最優的設計了，用藝術字體就有點畫蛇添足了。文字用寫出來的方式的話，則需要引入這種字型，而字型體積一般也不小，為了不到十幾處的文字，引入字型庫顯然有點浪費流量，更主要的是影響載入速度，所以切圖時文字基本當圖片來切了。跟第一種重構方式不一樣的是，切圖時把所有主題圖片都整合到一張圖片上了。

2. 就是下面這張圖片，因為文字是白色的，為了方便閱讀，我加了一個綠色背景，事實上是一張透明的png圖片，透明的圖片適應性往往更好，遇到主題板塊顏色不同時不會衝突。重構這種頁面如果不用實現文案的藝術字體效果，用我後面講到的偽類方式重構就更好，當然這個設計本身問題是不大的，這種設計結構很貼合實際。

3. 重構程式碼如下所示，相對來說減少了http請求，但是這張整合的圖片體積往往會大一點，然後各個板塊顯示的部分，用調節背景位置的方式控制。

《三》

1. 下面這種是理想狀態的設計，但是理想狀態就像陶淵明筆下與世無爭的世外桃源，往往不那麼容易成真，一旦文字不那麼對稱，用整張背景圖重構的方式要想保證文字不會覆蓋在裝飾元素上，勢必要把裝飾元素移遠一點，這樣的話就會顯得不夠緊湊，而且萬一有的文字少好幾個，有的文字多幾個，那就會特別的彆扭。

2. 那種情況就像下面這種感覺，雖然設計師巧妙的用疏散裝飾性元素的方式去協調美觀，但是並沒有解決本身相對位置不一致的根本問題。

3. 不過相對前面兩種重構來說，只要切一張背景圖就好，而且體積會小一點。

4. 既然背景圖都一樣，變化的文字又可以直接寫出來，程式碼比前兩種就更簡單了，如下所示。

《四》

1. 最優的設計和重構方式應該像下面這樣，既考慮美感，又考慮前端效能，重複而又不呆板，文案又可以直接寫出來，並且對文案字數的包容能力也更強，也更容易被搜尋引擎識別和有利於seo優化。為了便於理解，我做了下面一個動畫，從中我們可以看到不管文案字數多少，裝飾元素和文案兩邊的距離是沒變的。

2. 更直觀的就是，重構只需要下面這張尺寸更小、體積更小的圖片。不過麻雀雖小，五臟俱全，圖片雖小，用它來還原整個主題部分的設計，已經綽綽有餘了。

3. 對比上面所有的程式碼，我們會發現這裡多了一個叫做“zhuti”的盒子，妙就妙在這裡，加這個塊級元素是為了給“tit”設定display屬性後不至於並列在一排，而設定了display:inline-block屬性後的“tit”作為父級給偽類定位時，能夠保證偽類左、右兩邊位置為零時，剛好就在撐開“tit”最寬文字的兩端。這種巧妙的方式平常很少見，包括比較注重頁面互動的京東頁面，也不曾出現，我是在研究移動端flex佈局時無意中看到的，別提當時有多興奮。

附本次實操的高清視訊……^ - ^

https://v.qq.com/x/page/b0765rccnyz.html

      另外，css中的偽類除了:before和:after以外，還有諸如:hover、:checked、:focus、:nth-child(n), 其實偽類數量比其他標籤選擇器（div、p、h1)的總和還多，但是在css中出現的次數卻是最少的，不是因為不實用，而是功能性的東西出現在正確的時間和地點就好，而不是靠出現次數和低階勤奮刷存在感的，就好像梅西一樣，他踢球像是在散步，但是他不瘋跑也不會被否定價值。同樣，css偽類也是扮演著這樣的角色，各司其職並於關鍵處，一招棋活。:hover多用於css中處理滑過時的互動，:checked多用於css中選擇選中的表單，:focus多用於js中啟用輸入框後執行某個行為，:nth-child(n)多用於css中選擇同類元素中特定的單個或多個元素。喜歡並覺得實用的朋友，可以多多關注我哦，後續會推出更多貼合設計的前端教程……！