Bold on Hover moves elements. Only solution doesnt work in firefox

Question

I tried to make a simple navigation where the text gets bold when it's hovered. Since it's not that hard i got it pretty fast but every time I hovered it the element "pushed" away the other elements in the navigation. So i searched for hours since i found a solution for it with pseudo-elements. But this method doesn't work in Firefox.

Take a look at this:

#SOCIALMEDIA {
 position:relative;
 margin-right: 100px;
 margin-top: 60px; 
 float:right;
}

#SOCIALMEDIA_LIST {
 font:  14pt Roboto_ltLocal;
 display:inline-block;
 overflow: hidden;
 text-align:center;
 
}

#SOCIALMEDIA_LINKS { 
 text-decoration:none;
 color: #444444;
 display:inline-block;
 padding:4px 8px;
 text-align:center;
} 

#SOCIALMEDIA_LINKS:hover { 
 font-weight: bolder;
} 

#SOCIALMEDIA_LINKS::after {
 display:block;
 content:attr(title);
 font-weight:bold;
 height:1px;
 color:transparent;
 overflow:hidden;
 visibility:hidden;
}

<ul id=SOCIALMEDIA>
      <li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Livestream"><span class="social-link"> Livestream</span></a></li>
      <li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="YouTube"><span class="social-link"> YouTube</span></a></li>
      <li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Twitter"><span class="social-link"> Twitter</span></a></li>  
     </ul>

In JSFiddle and Chrome and every other browser it works like a charm. But Firefox doesn't like Pseudo. I searched the internet for solutions ... but nothing wants to work. Maybe you can help me.

My code is a "customized" version of the best top answer of this post 4 years ago.

So to be honest i dont know how it works i just see that it works in some browsers.

score 1 · Answer 1 · answered May 03 '17 at 15:49

Setting a static width on the li elements and removing the pseudo selector will keep them from moving their siblings. Something like this:

#SOCIALMEDIA {
  position: relative;
  margin-right: 100px;
  margin-top: 60px;
  float: right;
}

.SOCIALMEDIA_LIST {
  font: 14pt Roboto_ltLocal;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  /*This is what I added*/
  width: 100px;
}

#SOCIALMEDIA_LINKS {
  text-decoration: none;
  color: #444444;
  display: inline-block;
  padding: 4px 8px;
  text-align: center;
}

#SOCIALMEDIA_LINKS:hover {
  font-weight: bolder;
}

<ul id=SOCIALMEDIA>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Livestream"><span class="social-link"> Livestream</span></a></li>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="YouTube"><span class="social-link"> YouTube</span></a></li>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Twitter"><span class="social-link"> Twitter</span></a></li>
</ul>

Also, I changed your #SOCIALMEDIA_LIST to .SOCIALMEDIA_LIST as IDs should never be duplicated.

that's pretty good thank you. i guess i will go with this ... but is there a way to do it without a fixed width which works in firefox? since the width has to to be pretty high because of the the word "Livestream" the gap between livestream and youtube is smaller than the gap between "youtube" and "twitter" and i dont want to put Livestream at the end. — Alex Acoustic, May 03 '17 at 18:12

Bold on Hover moves elements. Only solution doesnt work in firefox

1 Answers1