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

Question

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!

note that if you replace the tag button with div, it works. But still can't figure it out what style allow this — Luccas
– Luccas, Commented Feb 18, 2014 at 16:15

pstenstrm · Accepted Answer · 2014-02-18 16:02:59Z

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

answered Feb 18, 2014 at 16:02

pstenstrm

6,5195 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lefoy Over a year ago

This could be a good alternative, I updated the jsfiddle with this solution and it seems to work. jsfiddle.net/esRBa/2

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related