jQuery选择伪元素：after

一尘不染

jQuery选择伪元素：after

css

我想选择伪元素 :after

这是我的CSS：

show-more:after
{
    content : (" > ");
}

JQuery 码

$(function(){
    $('.show-more:after').click(function() {
        alert("Yes");
    }); 
});

阅读 5820

2020-05-16

共1个答案

一尘不染

直接绑定到伪元素是不可能的，因为它们不是DOM的一部分，但是可以通过绑定到父元素并测试与作用于该元素的元素相关的偏移来近似达到预期的效果:after：

以下显示为ELEMENT++，其中单击“ ELEMENT”和“ ++”分别会触发不同的行为：

<span>ELEMENT</span>



span::after {
  content: '++';
  position: absolute;
}

span.c1 {
  background: yellow;
}

span.c2::after {
  background: orange;
}



const span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
});

2020-05-16