在 yui-purecss 按钮中使用 :after 和 float:right 在 Firefox 中出现奇怪的行为

Question

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: "[=12=]BB";
   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;
 }

您可以看到按钮在 Chrome、IE 甚至 Safari 中都按预期显示。箭头显示在按钮文本的右侧。然而，Firefox 在按钮文本和 :after 元素之间插入了一个分隔符。有任何想法吗？（这是我第一次提交 Stack Overflow，如果我忘记包含任何信息，请告诉我。）

Answer 1

删除 float:right 并将 display:inline-block 添加到 .pure-button:after

Fiddle: http://jsfiddle.net/9opb4n03/2/

在 yui-purecss 按钮中使用 :after 和 float:right 在 Firefox 中出现奇怪的行为

Weird behavior in Firefox using :after and float:right inside of a yui-purecss button

css

yui-pure-css