如何解决ie8中不支持before和after伪类的问题

解决办法是新增一个css类来作为后备。

例如如下写法

body:before, body .before {
    content: "";
    ...
}

既然使用js来检测，我们可以把html写成下面的这个样子，将content的内容写到data-content中。

<div class="example" data-content="xxxx"></div>

然后当浏览器版本比较低的时候，使用下面的js代码来自动插入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);
};

解决办法参考自张鑫旭的博客http://www.zhangxinxu.com/wordpress/2012/11/before-after-use-web/