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

Firefox：点击CSS伪元素不会触发点击事件

1 个答案: