js或者jq如何有效方便控制伪元素（：before，：after

阿里字体图标库的编码是以&#x开头的，以&#x e617;为例：iconfont的主体部分为e617，同一个字体图标在HTML，css,js里面的写法是不同的。HTML里面的写法就是字体图标的全写，以&#x开头，以；结尾，例：

<div data-icon="&#xe617;"></div>,

但是，css里面则是以\开头，没有后缀；则css里面的写法为：

div:after{

content:"\e617";    //必须

display:"inline-block";//伪元素默认行内元素，如果想要改变其大小，需要将其转变成行内块或者是块级元素，或者float与定位，也可改变其显示方式

width:18px;

height:18px;

}

而jq的iconfont写法又不一样，js的写法是以\u开头，没有后缀，如：

$("div").attr("data-icon","\ue617");或者$("div").data("icon","\ue617");

以上只是iconfont在HTML，CSS，JavaScript里面的各自的写法，那么怎么用js或者jq去控制伪元素里面的字体图标呢？

需要通过改变div里面的自定义属性data-icon的值，来改变其伪元素：after或者：before里面的content的值，需要用到html5里面的新特性attr()，如下：

HTML：<div data-icon="&#xe617;"></div>

CSS： div:after{

            content:attr(data-icon);

            display:"block"}

Jquery：$("div").attr("data-icon","\ue616")；  //即可设置

JS：document.querySelector("div").dataset("icon","\ue616")；

希望能够帮到大家！！！