I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to achieve the desired layout.
I would appreciate any guidance on how to implement this functionality using HTML and CSS.
Here is the relevant code from index.html:
<div class="navbar-center">
<ul>
<li class="text-center"><a href="#" class="active-link"><img src="images/home.png"><br><span>Home</span></a></li>
<li><a href="#"><img src="images/network.png"><span>My Network</span></a></li>
<li><a href="#"><img src="images/jobs.png"><span>Jobs</span></a></li>
<li><a href="#"><img src="images/message.png"><span>Messaging</span></a></li>
<li><a href="#"><img src="images/notification.png"><span>Notifications</span></a></li>
</ul>
</div>
And here is the corresponding styling from style.css:
.navbar-center ul li{
display: inline-block;
list-style: none;
}
.navbar-center ul li a{
display: flex;
align-items: center;
font-size: 14px;
margin: 5px 8px;
padding-right: 5px;
position: relative;
}
.navbar-center ul span{
font-size: 15px;
}
/*span tag change side to bottom for .navbar-center ul li a span*/
.navbar-center ul li a img{
width: 30px;
}
.navbar-center ul li a::after{
content: '';
width: 0;
height: 2px;
background-color: #045be6;
position: absolute;
bottom: -14px;
transition: width 0.3s;
}
.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
width: 100%;
}