應用before/after偽類時如何CSS命名以及針對ie6/ie7瀏覽器兼容
一、訴說前言
before/after偽類相當于在元素內部插入兩個額外的標簽，其最適合也是最推薦的應用就是圖形生成 。在一些精致的UI實現上，可以簡化HTML代碼，提高可讀性和可維護性 。國外這兩個偽類應用相當的普及以及興盛 ， 不過貌似我們這邊前端er們普遍缺乏使用這兩個偽類的意識，要使用頂多也就是跟風的清除浮動應用 。
我想，這可能受兼容性思維影響IE6/7瀏覽器并不支持，還是等什么時候IE6/IE7換屆下臺的時候再說吧~~
雖然八尾九尾都是殘體，并不影響十尾的成型 。一粒老鼠屎掉進鍋里，你就真讓這一鍋紅燒肉毀了把有翔的這部分給阿黃（中華田園犬）吃就可以了 。
本文簡單展示我在實際項目中，應用before/after偽類時候，如何CSS命名的，HTML有哪些處理，如何對付IE6, IE7瀏覽器的 。
二、大致處理流程
1.CSS部分
類似這樣子的命名：
復制代碼代碼如下:
.example:before, .example before {}
.example:after, .example after {}
一個有冒號 ， 一個是空格分隔 。前者IE8 及其他現代瀏覽器；后者為IE6-7準備的 。
2.HTML部分
如果before/after偽類元素含有content內容（不是空字符），則content內容在HTML標簽上呈現（方便IE6/7下獲?。?例如：
復制代碼代碼如下:
div class="example" data-content=""/div
CSS部分的content屬性值應該如下：
復制代碼代碼如下:
.example:before, .example before { content: attr(data-content); ... }
.example:after, .example after { content: attr(data-content); ... }
3.JS部分
JS是為IE6/7準備的，所做的事情很簡單，網元素內部插入兩個元素，標簽名為before或after或同時 。方法代碼如下：
復制代碼代碼如下:
var $beforeAfter = function(dom) {
if (document.querySelector || !domdom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || ’’;
var before = document.createElement("before")
, after = document.createElement("after");
// 內部content
before.innerHTML = content;
after.innerHTML = content;
// 前后分別插入節點
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};
于是，您想要的效果就可以實現了，例如下面的例子 。
三、實際應用之含尖角的tip類提示效果
下面是效果圖，IE6下以及FireFox16下的效果截圖
IE6/7的CSS與IE8 基本上都是公用的，唯一不同就是選擇器一個空格間開 ， 一個冒號偽類，如下：
復制代碼代碼如下:
.tip:before, .tip before,
.tip:after, .tip after{...}
然后，JS如下一調用即可：
復制代碼代碼如下:
$beforeAfter(document.getElementById("tip"));
OK，全部兼容，完事OK 。
一般而言 ， after以及before生成的元素只能是一些不影響功能或是重要視覺的效果 。因此，IE6/7下JS驅動不關緊要效果的生成是相當OK的 。
趕著幫老婆帶飯，拋磚引玉 ， 就這些！
