0

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?

ksernow
  • 662
  • 3
  • 14
  • 33
  • Possible duplicate of [Hide element, but show CSS generated content](https://stackoverflow.com/questions/4912765/hide-element-but-show-css-generated-content) – TylerH Nov 16 '17 at 22:56
  • Also please note that questions asking 'why doesn't my code work' require a [mcve]; *pseudo-code is not adequate*. – TylerH Nov 16 '17 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 Nov 16 '17 at 23:51

1 Answers1

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

Rudolph Gottesheim
  • 1,671
  • 1
  • 17
  • 30
  • As using `visibility: hidden/visible;` works just fine, need for _bad hacks_. Why it does not for OP is another story. – Asons Nov 16 '17 at 23:59
  • 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: https://jsfiddle.net/6vdkn8bg/1/ – Asons Nov 17 '17 at 16:00
  • I don't get it. They also said _visible_. And `visibility: hidden` makes it _invisible_. But maybe I'm misunderstanding something. – Rudolph Gottesheim Nov 17 '17 at 16:56
  • If you check OP's first CSS sample you'll see what they had, and what they said does not work...which it does. – Asons Nov 17 '17 at 17:03