CODEWITHSUNDEEP
htmlcssfirefoxnavigationpseudo-element
Alex Acoustic
Alex Acoustic

Reputation: 3

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

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.

Upvotes: 0

Views: 688

Answers (1)

Dryden Long
Dryden Long

Reputation: 10180

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.

Upvotes: 1

Related Questions