Geek Answers Handbook

CSS: after the pseudo-element does not work inside the button in any version of IE

I can not get this code to work in any version of IE. Am I doing something wrong or is IE just shit like 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/

+5
source share
2 answers

You need to add overflow: visible to the button .

 <button>A button</button> button { position: relative; overflow: hidden; } button:after { content: "Can u see me?"; position: absolute; right: -100px; top: 0; }

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

IE should set it to hidden by default on buttons.

+10
source
Items

button replace elements.

And according to the CSS 2.1 specification ,

This specification does not fully define the interaction: before and: after replacing elements (for example, IMG in HTML). This will be described in more detail in future specifications.

But the current draft of level 3 selectors only says

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

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

0
source

More articles:


All Articles