Verifying pseudo-elements in Internet Explorer

Question

I have the following pseudo-element:

input[type=radio].selected::before 

In Internet Explorer, the pseudo-element does not appear at all, so I decided to take a look. I find the selector in the inspector (the selector in the inspector will be a great children's book!) But all the properties are clogged. (i.e. rewritten / invalid). Most attributes are not overridden by other attributes. Is this the default behavior in IE, or does this mean that the style does not work at all and, more importantly, why they are not displayed? Below is the full css:

 input[type=radio]{ visibility:hidden; cursor: pointer; width: 22px; height: 22px; } input[type=radio]::before{ content: ""; display: inline-block; visibility: visible; width: 16px; height: 16px; margin-bottom: 0; border: 1px solid #ddd; -moz-border-radius:8px; border-radius:8px; font-size: 41px; line-height: 18px; padding-left: 1px; color: #a3a3a3; } 

Answer 1

W3:

: before and: after pseudo-elements

Authors determine the style and location of generated content using: before and: after pseudo-elements. As their names show :: before and: after pseudo-elements, indicate the location of the contents before and after the contents of the element tree. The content 'property in combination with these pseudo-elements indicates that it is inserted.

In other words, pseudo-elements can only be used for container elements. That is why it will not work on your input element.

Answer 2

Your question is how to debug a pseudo-element in IE, because I have no answer right now (on Mac atm). However, I can tell you the following:

An input is a self-closing element ( <input /> ), so it has no actual content. The same applies to images. Because of this, you do not need to add things before or after, because these pseudo-elements are inserted (you guessed it) before / after the contents of the element.

In short: before and :: after will not work on self-closing elements.