how to make pseudo element visible and clickable using css on firefox

Question

I have a button followed by a pseudo element. The button displays 'next' and the pseudo element displays '>'. This is used for pagination.

I have hidden the button but made the pseudo element visible by using css properties

button{
    visibility: hidden;
}
button::pseudoElement{
    visibility: visible;
}

Now the button is hidden and element is visible. It is also clickable. It works in chrome,safari and ie. But it does not click on firefox. What do I change?

EDIT This hack worked

  button{
        color: transparent;
    }
    button::pseudoElement{
        color: black;
    }

Any better approach?

Answer 1

Pseudo elements aren't actually inserted before or after the element itself. They are inserted as the first/last child element. So if you hide the "parent" element, their ::before / ::after pseudo elements will be hidden as well.

In your case, I would just do the old text-indent: -9999px or font-size: 0 trick on the parent element and reset the pseudo element ( text-indent: 0 ).

With your color: transparent solution, the element will retain its size. With the text-indent trick it's just using the space the pseudo element needs.