3

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.)

Jeremathy
  • 33
  • 3

1 Answers1

1

Remove float:right and add display:inline-block to .pure-button:after

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

dippas
  • 58,591
  • 15
  • 114
  • 126
gopalraju
  • 2,299
  • 1
  • 12
  • 15
  • I've tried that but it introduces a strange offset between the button text's line-height and the arrow line-height. I can't get them to match. I've tried adjusting the line-height of the :after element but it effects both the button text and the pseudo element. That arrow just needs a 2-3px shift down. – Jeremathy Jun 22 '15 at 17:33
  • I've fixed this by adding vertical-align:middle to the :after element. The font I'm using (League Gothic) has a tall baseline to accommodate for commas and such so I ended up adding small bit of padding to .pure-button then re-adjusting the :after element with margin:-3px; It feels so dirty but I guess it's working. – Jeremathy Jun 22 '15 at 18:03