Firefox：单击 CSS 伪元素不会触发单击事件 [重复]

Question

这是我的按钮：

<button class="btn-close">Close alert</button>

... 使用以下 CSS：

.btn-close{
    position: relative;
    height: 30px;
    border: none;
    background-color: #332b2a;
    color: #fff;
    outline: none;
    cursor: pointer;
}

.btn-close:after {
    content: " ";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    right: -32px;
    top: 0;
    background-color: #332b2a;
}

...以及以下（示例）jquery：

$(document).ready(function(){
    $(document).on('click', '.btn-close', function(){
        alert("It works!");
    });
});

但是，当我尝试单击 after 元素时，它不会触发 click 事件。有谁知道是否有任何解决方案？我真的不想在按钮内使用空跨度。

它适用于 Chrome、Opera 和 Safari。我的 Firefox 版本是 27.0.1

如果你想自己尝试，我做了一个 jsFiddle 示例：http://jsfiddle.net/esRBa/1/

感谢您的帮助！

Answer 1

我认为最简单的解决方案是扩展 padding 以覆盖伪元素。

.btn-close{
    padding: 0 32px 0 0;
}

.btn-close:after {
    right: 0;
}