pseudo content properies varies in each browsers - html

Question

I am using custom CSS to style radio boxes but now the problem is that
checked radio circle is appearing at diff positions in IE11, FF36 and Chrome. Below is the illustration
CSS used to achieve this is as below:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 23px;
height: 22px;
margin-right: 10px;
position: absolute;
left: 0;
border:1px solid $grey;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
content: "\25CF";
border:1px solid $light-blue;
color: $light-blue;
font-size: 26px;
text-align: center;
line-height: 0rem;
padding-top: 7px;
}
Any ideas please to work it same in all browsers..

Answer 1

I changed the approach. Instead of using content and line height, i switched as below
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}
JS Fiddle