jQuery操作伪类选择器如：::before和::after

可以使用data属性将内容传递给伪元素，然后使用jQuery来操作

Html代码如下：

<span>foo</span>

jQuery代码如下：

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

CSS设置如下：

span:after {
    content: attr(data-content);
    /* 你想显示的内容 */
}

如果你想阻止“”其他文本“”出现，你可以这样解决：

Html：

<span>foo</span>

jQuery：

$('span').hover(function(){
     $(this).addClass('change').attr('data-content','bar');
   }).mouseleave(function(){
    $(this).removeClass('change');
   })

CSS：

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

需要注意的是我们使用到了attr函数，兼容性可以查看该链接。