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

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

Html代码如下：

foo

jQuery代码如下：

$('span').hover(function(){

$(this).attr('data-content','bar');

});

CSS设置如下：

span:after {

content: attr(data-content);

/* 你想显示的内容 */

}

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

Html：

foo

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';

}

需要注意的是我们使用到了链接。

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/2611.html