firefox adds strange space arround Pseudo-elements - css

Question

Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?

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;
}

Answer 2

I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/

Answer 3

I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.