最近無論是工作還是自我學習提升都很忙，面對長篇大論的博文總是心有餘而力不足，但又不斷的接觸學習到零碎的但是很有意義的知識點，很想分享給大家，是以本篇可能會很短。
正文從這裡開始：
<a></a>
我也是才知道這個姿勢。為了不誤導讀者，就趕緊補充一下。
僞元素雖然強大，但是還是有一些特定的标簽是不支援僞元素 before 和 after 的。
諸如 <code><img /></code> 、 <code><input /></code>、 <code><iframe /></code>，這幾個标簽是不支援類似 img::before 這樣使用。
究其原因，要想要标簽支援僞元素，需要這個元素是要可以插入内容的，也就是說這個元素要是一個容器。而 input，img，iframe 等元素都不能包含其他元素，是以不能通過僞元素插入内容。
我們都知道，在 HTML 标簽中有這樣一個屬性 – title，該屬性規定關于元素的額外資訊，就是我們可以往 title 裡面填入一段文字，滑鼠移到元素上時就會顯示這段文本。
像是這樣 <code><element title="value" ></code>。效果如下：
;
但是這個 hover 框有兩個小問題：
響應太慢，通常滑鼠 hover 上去要隔 1s 左右才會出現這個 title 框
框體結構無法自定義，彈出框的樣式無法自定義
嗯，通常要解決上面的方法，或者說我們需要一個滑鼠 hover 上去的時候彈出一個提示層的效果都不會采用 title 屬性，至少是多用一個标簽，或者是配合使用 JS 模拟一個彈出層。
這裡有一個純 CSS 的方案可以解決這個場景，并且不需要添加額外的 HTML 标簽，運用了僞元素，先上 Demo：
滑鼠 hover 一下文字，發現彈出層響應十分迅速（因為就是 CSS hover，沒有延遲）。并且這裡的彈出層的樣式也可以完全自定義，沒有用到 JS 代碼，并且檢視 HTML 代碼可以看到不需要多餘的标簽。
怎麼實作的呢？主要是運用了僞元素的 <code>content</code> 屬性， <code>content</code> 通常是用于在僞元素中插入内容的。而其中有一句文法 <code>content: attr(value)</code> 類似這樣，可以讀取對應 HTML 标簽的 <code>value</code> 屬性。也就是：
假設一個 HTML 标簽定義為： <code><div data-msg="ABC"></code>
那麼該 div 對應的僞類如果設定了 <code>content:attr(data-msg)</code> ，就可以讀取到 data-msg 的值，相當于<code>content:"ABC"</code>
而且框體由于是僞類生成的，是以我們可以自定義它的樣式及位置，運用這個效果，我們應用在可以在許多無法正常把資訊展示完的地方。
我們經常需要實作多列均勻布局，能夠自适應各種情況，如下：
在移動端我們可以使用 flex 布局，但是在 PC 端如果要相容 IE6+ ，通常都需要一些額外的标簽控制最後一個元素或者配合 JS 進行運算。
我們知道，有個 <code>text-align:justify</code> 可以實作兩端對齊文本效果，一開始我猜測使用它可以實作：
最後一個水準對齊屬性是 justify，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字元，因為不同的語言有不同的連字元規則。規範沒有嘗試去調和這樣一些很可能不完備的規則，而是幹脆不提這個問題。
額，我看完上面一大段解釋還是沒明白上面意思，再繼續查證，才找到原因：
雖然 text-align:justify 屬性是全相容的，但是要使用它實作兩端對齊，需要注意在子產品之間添加[空格/換行符/制表符]才能起作用。
也就是說每一個 <code><i>1</i></code> 間隙，至少需要有一個空格或者換行或者制表符才行。
我嘗試給每一塊中間添加一個換行符，發現還是不行：
再尋找原因，是出在最後一個元素上面，然後我找到了 <code>text-align-last</code> 這個屬性，text-align-last 屬性規定如何對齊文本的最後一行，并且 text-align-last 屬性隻有在 text-align 屬性設定為 “justify” 時才起作用。
嘗試給容器添加 <code>text-align-last:justify</code>，發現終于可以了，多列均勻布局：
但是一看相容性，慘不忍睹，隻有 IE 和 最新的 chrome 支援 text-align-last 屬性，也就是說，如果你不是在使用 IE 或者 最新版的 chrome 觀看本文，上面這個 codePen 例子還是沒有均勻分布。
好，鋪墊了這麼久，終于可以引出本文的主角僞元素了，上面說了要使用 <code>text-align:justify</code> 實作多列布局，要配合 <code>text-align-last</code> ，但是它的相容性又不好，真的沒辦法了麼，其實還是有的，使用僞元素，可以完美實作：
通過給僞元素 :after 設定 <code>inline-block</code> ，配合容器的 <code>text-align: justify</code> 就可以輕松實作多列均勻布局了。配合幾句 hack 代碼，可以實作相容到 IE6+ ，最重要的是代碼不長，很好了解。
最後這種方法也是最近才學習到的，參考了這篇文章，非常值得一讀：
<a href="http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567067&idx=1&sn=8c9602c305026c55f412fe3d398cbf58&scene=0#wechat_redirect" target="_blank">别想多了，隻不過是兩端對齊而已</a>
本文主要就是多介紹了僞元素的兩種實用方法，更多僞元素的妙用可以戳
希望這篇文章對大家有所幫助，尤其是在對問題解決的思維層面上。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
本文轉自ChokCoco部落格園部落格，原文連結：http://www.cnblogs.com/coco1s/p/5667853.html