CSS: dopo che lo pseudo elemento non funziona all'interno del pulsante in qualsiasi versione di IE

Question

Non riesco a far funzionare questo codice in nessuna versione di IE. Sto facendo qualcosa di sbagliato o IE fa solo schifo come al solito?

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/

Answer 1

È necessario aggiungere overflow: visible-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 deve impostarlo hidden di default sui pulsanti.

Answer 2

button elementi sono elementi sostituiti.

E secondo la CSS 2.1 spec,

Questa specifica non definisce completamente l'interazione di: prima e: after con elementi sostituiti (come IMG in HTML). Questo sarà definito in modo più dettagliato in una specifica futura.

Ma l'current draft of Selectors Level 3 dice soltanto

L':: :: prima e dopo la pseudo-elementi possono essere usati per descrivere contenuto generato prima o dopo il contenuto di un elemento. Sono spiegato in CSS 2,1

Pertanto, utilizzando :before o :after su button elementi produrrà risultati inaffidabili.