17

I have a button and on a :hover I would like an after element to show. But I can't see it. Is it possible to have an :after element on a button?

.button {
  cursor: pointer;
  height: 30px;
}

.button-primary {
  border: none;
}

.button-primary:hover:after {
  display: block;
  position: relative;
  top: 3px;
  right: 3px;
  width: 100px;
  height: 5px;
}
<button class="button button-primary">My button</button>
tacoshy
  • 5,858
  • 5
  • 9
  • 28
user1386906
  • 1,091
  • 6
  • 25
  • 52
  • 10
    Don't forget `content:"";` in your `:after`. – Albzi Sep 12 '13 at 14:57
  • 1
    @BeatAlex This is the answer why the pseudo element doesn't show up. – feeela Sep 12 '13 at 15:00
  • You're missing the `}` at the end of the snippet @feeela – Albzi Sep 12 '13 at 15:01
  • 1
    @BeatAlex might be just a copy/paste mistake, as this is SASS syntax and there are maybe much more definitions before the original closing bracket. Good hint nonetheless. – feeela Sep 12 '13 at 15:08
  • Ah yeah he commented on my answer anyway telling me it was just a mistake! :) – Albzi Sep 12 '13 at 15:10
  • 2
    Make sure you watch what element you're actually using. The button element should allow it, but other *replaced* elements like input, img, textarea, select, etc. do not. – cimmanon Sep 12 '13 at 15:34
  • This is still an interesting question - Chrome adds the :after pseudo Element before the end tag of the button, and not after it. – Gerfried Dec 08 '17 at 11:19

2 Answers2

28

This should now work on all up to date browsers.

To get it to work, you need to add content:""; in your after.

Albzi
  • 15,201
  • 5
  • 43
  • 61
  • Do you know on which browser it doesn't work? I just tried on browserstack a fiddle, and it seems that every browser that support pseudo elements accept it on ` – vard Dec 02 '15 at 15:25
0

Yes you can use it – as long as you as don't need to support some very old browsers, e.g. MS IE 7 or lower. I don't know of any other browser that doesn't understand pseudo elements on empty HTML tags. In fact I already used it in several production sites without any problems.

feeela
  • 27,811
  • 6
  • 58
  • 68