應(yīng)用before/after偽類時怎樣讓CSS命名以及針對ie6/ie7瀏覽器兼容？解決方法分享

一、訴說前言
before/after偽類相當于在元素內(nèi)部插入兩個額外的標簽，其最適合也是最推薦的應(yīng)用就是圖形生成。在一些精致的UI實現(xiàn)上，可以簡化HTML代碼，提高可讀性和可維護性。國外這兩個偽類應(yīng)用相當?shù)钠占耙约芭d盛，不過貌似我們這邊前端er們普遍缺乏使用這兩個偽類的意識，要使用頂多也就是跟風的“清除浮動”應(yīng)用。
我想，這可能受兼容性思維影響——IE6/7瀏覽器并不支持，還是等什么時候IE6/IE7換屆下臺的時候再說吧~~
雖然八尾九尾都是殘體，并不影響十尾的成型。一粒老鼠屎掉進鍋里，你就真讓這一鍋紅燒肉毀了——把有翔的這部分給阿黃(中華田園犬)吃就可以了。
本文簡單展示我在實際項目中，應(yīng)用before/after偽類時候，如何CSS命名的，HTML有哪些處理，如何對付IE6, IE7瀏覽器的。
二、大致處理流程
1.CSS部分
類似這樣子的命名：

一個有冒號，一個是空格分隔。前者IE8 及其他現(xiàn)代瀏覽器;后者為IE6-7準備的。
2.HTML部分
如果before/after偽類元素含有content內(nèi)容(不是空字符)，則content內(nèi)容在HTML標簽上呈現(xiàn)(方便IE6/7下獲取)，例如：

CSS部分的content屬性值應(yīng)該如下：

3.JS部分
JS是為IE6/7準備的，所做的事情很簡單，網(wǎng)元素內(nèi)部插入兩個元素，標簽名為”before“或”after“或同時。方法代碼如下：

于是，您想要的效果就可以實現(xiàn)了，例如下面的例子。
三、實際應(yīng)用之含尖角的tip類提示效果
下面是效果圖，IE6下以及FireFox16下的效果截圖

IE6/7的CSS與IE8 基本上都是公用的，唯一不同就是選擇器一個空格間開，一個冒號偽類，如下：

然后，JS如下一調(diào)用即可：

OK，全部兼容，完事OK 。
一般而言，after以及before生成的元素只能是一些不影響功能或是重要視覺的效果。因此，IE6/7下JS驅(qū)動不關(guān)緊要效果的生成是相當OK的。
【應(yīng)用before/after偽類時怎樣讓CSS命名以及針對ie6/ie7瀏覽器兼容？解決方法分享】