偽元素選擇器

pseudo-classes

如何给伪元素绑定事件

style:

#mything {
    width: 100px;
    height: 100px;
    position: relative;
    background: blue;
}
#mything:after {
    content: "x";
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 10px;
    height: 10px;
}

javascript:

$('#mything').click(function(e) {
    if (e.clientX > $(this).offset().left + 90 &&
        e.clientY < $(this).offset().top + 10) {
        // do something
    }
});

html:

<div id="mything">Foo</div>

參考

前端工程師手冊-CSS選擇器

Pseudo-elements

《CSS3伪类选择器》