Firefox: Click on CSS pseudo element doesn't trigger click event [duplicate]

Question

This question already has answers here:

Use javascript to click on a pseudo-element? (5 answers)

Closed 8 years ago.

Here is my button:

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

... with the following 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;
}

... and the following (example) jquery:

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

However, when I try to click on the after element, it doesn't trigger the click event. Does anyone know if there is any solution? I don't really want to use an empty span inside the button.

It works in Chrome, Opera and Safari. My Firefox version is 27.0.1

I made a jsFiddle example if you want to try yourself: http://jsfiddle.net/esRBa/1/

Thanks for your help!

Answer 1

I think the easiest solution would be to extend the padding to cover the pseudo-element.

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

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