JsFiddle: http://jsfiddle.net/9opb4n03/1/
HTML:
<html lang="en">
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
</head>
<body >
<a class="pure-button" href="#"><span>BUTTON</span></a><a class="pure-button" href="#">Button Text</a><a class="pure-button" href="#">Another Button</a>
</body>
</html>
CSS:
.pure-button {
font-family: League Gothic;
font-size: 18px;
padding: 0 12px;
color: #fff;
border: 2px solid #fff;
background-color: #203920;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 0;
margin-top:40px;
margin-top:2rem;
line-height: 51px;
height:51px;
}
.pure-button:after {
content: "\00BB";
font-size:34px;
font-family:Georgia, Times, "Times New Roman", Serif;
display:block;
float:right;
line-height:47px;
height: 47px;
border-left: 2px solid #fff;
margin-left: 17px;
padding-left: 12px;
}
You can see that the buttons display as expected in Chrome, IE and even Safari. The arrows display to the right of the button text. Firefox, however, inserts a break between the button text and the :after element. Any ideas? (This is my first Stack Overflow submission, please let me know if I forgot to include any information.)
Remove
float:rightand adddisplay:inline-blockto.pure-button:afterFiddle: http://jsfiddle.net/9opb4n03/2/