firefox adds strange space arround Pseudo-elements

Question

Take a look at these photos
JSFiddle link at the bottom

firefox:

Answer 1

Maybe try positioning the like absolutely using CSS

.like{
float: left; 
height: 30px; 
margin: 12.5px 0; 
background-color: #FAFAFA; 
border-radius: 4px; 
position:relative;
padding: 0 10px 0 40px; 
margin: 12.5px 10px; 
background-color: #000; 
font: 16px/30px arial; 
color: #FFF; 
border:none;}

.like::before{
position:absolute; top:0; left:0; 
width:30px; 
content: 'like'; 
margin: 0 10px 0 0; 
padding: 0 5px;
background-color: #FF7373; 
color: #FFF; 
border-right: 1px solid #CCC; display:block; border:0;
}