Currently, my homepage displays a CSS content hover effect when the user interacts with the icons. However, I am facing an issue where all icons show the same text "home" on hover. How can I customize the text output for each individual icon/link? Your help is much appreciated.
Navbar.html:
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<img src="{% static 'portfolio/logo.png' %}" alt="">
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-home "></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-cog"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-book"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-tasks"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-phone"></i>
</a>
</li>
</ul>
</nav>
_sidebar.scss:
.navbar{
position:fixed;
background-color: $navbg;
}
.navbar-nav{
list-style: none;
padding: 0;
margin: 0;
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
}
.nav-item{
width:100%;
&:last-child {
margin-top: auto;
}
}
.nav-link{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 5rem;
font-size: 2rem;
padding:1.5rem;
text-decoration: none;
i{
font-size: 3rem;
color: $navicon;
&:hover{
color:$icon-hover;
}
}
&:hover::after{
content : "Home";
position: absolute;
color:#12181b;
background: #b2becd;
right:-7rem;
border-radius: 0.5rem;
padding:0.5rem;
margin-left:2rem;
}
}
.logo{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-bottom: 2.5rem;
width: 100%;
img{
width:60%;
}
}