Recently, I encountered an issue with a pseudo-element:
input[type=radio].selected::before
Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagine that as a children's book!), I noticed that all properties were struck through, indicating they were not valid or overwritten by something else. Could this be default behavior in IE? Or does it mean that the styling is completely ineffective? More importantly, why aren't they displaying correctly? Below is the complete CSS code snippet:
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;
}