I'm using flexbox for my nav bar and one problem I have encountered is when I hover over one of the buttons, the rest shifted a little due to my ::after element.
I tried setting a width for the <a> tag so the change of width on hover will only affect inside that width, but it didn't respond as I was hoping it to.
Can I get some suggestions on how to solve this?
nav {
position: fixed;
top: 0;
right: 0;
left: 0;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
height: 90px;
padding: 0 75px;
ul {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 715px;
a {
padding: 5px;
&:hover::after {
content: ".";
}
}
}
}<nav>
<a href="#home">
<h1>Brillian.</h1>
</a>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="javascript:void">Portfolio</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
</li>
</ul>
</nav>