Firefox CSS Content property not behaving as expected

Question

I am absolute positioning :after content associated with menu buttons in a navbar.

<div class="navbar-left nav-btn" id="user-login">
  <button type="button" id="login-btn" class="navbar-toggle" data-toggle="collapse">
    <i class="fa fa-user"></i>
  </button> 
</div>

#user-login i:after {
  content: "Login";
  position: absolute;
  right: -35px;
  top: 12px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
} 

For some reason, Firefox is ignoring the hyperlink properties of the content string due to absolute positioning. Chrome and Safari seem to handle this fine. Any ideas on how to keep my positioning and link properties consistent across all browsers?

Here is a JSFiddle with the navbar.

http://jsfiddle.net/Hr9ZL/

Answer 1

Rather than using the following to append the word "Login" and "Menu"

content: "Login";
content: "Menu";

Remove them from the CSS code and use the following HTML markup:

<button type="button" id="login-btn" class="navbar-toggle" data-toggle="collapse">
    <i class="fa fa-user"></i> LOGIN
</button>

<button type="button" id="menu-btn" class="navbar-toggle" data-toggle="collapse">
    MENU <i class="fa fa-bars"></i>
</button>

Here is a JSFiddle to show you: http://jsfiddle.net/vkEb6/

Answer 2

I got rid of absolute, and used margin for positioning. This has the added benefit that the dark background extends to the end of "Login" and "Menu" on mouse-over. the updated fiddle is here

the css looks like this:

#main-menu i:after {
   content: "Menu";
   margin-left: 5px;
   top: 12px;
   font-family: 'Helvetica Neue', Helvetica, sans-serif;
   font-size: 12px;  
   text-transform: uppercase;
} 

the same for the login.

EDIT - updated fiddle here