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?

Possible duplicate of Hide element, but show CSS generated content — TylerH
– TylerH, Commented Nov 16, 2017 at 22:56
Also please note that questions asking 'why doesn't my code work' require a minimal reproducible example; pseudo-code is not adequate. — TylerH
– TylerH, Commented Nov 16, 2017 at 22:56
Since that code part, using visibility: hidden/visible; work and is clickable in Firefox, you need to post a code snippet that reproduce the issue you have. — Asons
– Asons, Commented Nov 16, 2017 at 23:51

Rudolph Gottesheim · Accepted Answer · 2017-11-16 22:27:14Z

-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.

answered Nov 16, 2017 at 22:27

Rudolph Gottesheim

1,7111 gold badge17 silver badges31 bronze badges

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

4 Comments

Asons Over a year ago

As using visibility: hidden/visible; works just fine, need for bad hacks. Why it does not for OP is another story.

Asons Over a year ago

As OP askes "how to make pseudo element visible and clickable using css on firefox ", it works just fine to click on the pseudo using Firefox: jsfiddle.net/6vdkn8bg/1

Rudolph Gottesheim Over a year ago

I don't get it. They also said visible. And visibility: hidden makes it invisible. But maybe I'm misunderstanding something.

Asons Over a year ago

If you check OP's first CSS sample you'll see what they had, and what they said does not work...which it does.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related