应用before/after伪类时如何CSS命名以及针对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 || !dom && dom.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); 
};