I have a :after pseudo element that is placed below each of my nav bar buttons with one CSS selector, but for some reason it looks like the heights of the element underneath when you hover over the buttons "home" and "projects" are different from "about me" and "skills". Any idea as to why?
Here is a link to some code replicating the issue so you can see the different heights in question.
.nav-button {
font-weight: bold;
font-size: 24px;
margin-bottom: 36px;
width: 100%;
}
.nav-bar {
list-style-type: none;
padding-left: 5px;
}
.nav-button:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 0;
position: relative;
background: #E7AB79;
transition: width 0.3s ease 0s, right 0.3s ease 0s;
width: 0;
}
#home-button:hover:after {
width: 68px;
right: 0;
}
#aboutme-button:hover:after {
width: 110px;
left: 0;
}
#projects-button:hover:after {
width: 90px;
left: 0;
}
#skills-button:hover:after {
width: 64px;
left: 0;
}
.nav-button:hover {
cursor: pointer;
}<nav>
<ul class="nav-bar">
<li class="nav-button button" id="home-button">Home</li>
<li class="nav-button button" id="aboutme-button">About Me</li>
<li class="nav-button button" id="projects-button">Projects</li>
<li class="nav-button button" id="skills-button">Skills</li>
</ul>
</nav>