8

I can't get this code to work in any IE version. Am I doing something wrong or is IE just crap as usual?

HTML:

<button>A button</button>

CSS

button {
    position: relative;
}

button:after {
    content: "Can u see me?";
    position: absolute;
    right: -100px;
    top: 0;
}

Demo: http://jsfiddle.net/96ryusnp/

2
  • Strange: IE9 and up should support it correctly. IE8 has partial support. See css-tricks.com/browser-support-pseudo-elements May 11, 2015 at 20:00
  • I've tried IE10 and IE9 here on my virtual box. None of them is working. Please try for yourself if you have the possibility. Piz.
    – Operator
    May 11, 2015 at 20:08

2 Answers 2

23

You need to add overflow: visible to button.

<button>A button</button>

button {
    position: relative;
    overflow: visible;
}

button:after {
    content: "Can u see me?";
    position: absolute;
    right: -100px;
    top: 0;
}

http://jsfiddle.net/96ryusnp/1/

IE must set it to hidden by default on buttons.

1
  • Worked perfectly. So nice to find a simple solution to an IE problem every once in a while.
    – mike
    Sep 6, 2019 at 18:48
0

button elements are replaced elements.

And according to the CSS 2.1 spec,

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

But the current draft of Selectors Level 3 only says

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1

Therefore, using :before or :after on button elements will produce unreliable results.

2
  • As far as I know, this is incorrect; a button is a non-replaced element. Jan 4, 2017 at 11:36
  • @DaanMortier You can set the sizes of a button even if it has display: inline, which should only happen for replaced elements. One could argue that what happens is that the button binding forces it to be displayed as an inline-block, and that's why it works, without needing to be a replaced element. It's hard to say, because this is not fully defined and different browsers do different things. Let's say it's a "kinda-replaced" element.
    – Oriol
    Jan 4, 2017 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.