You can also create an underline link hover effect using Elementor. Although Elementor doesn’t provide such an underline hover effect in the nav, we’ll use custom code for this. You can see the complete code below.
Underline Effect Left to Right
<style>
/* Line Height and Change Color */
:root{
--line-color: #000;
--line-height: 3px;
}
.twd-menu-hover .elementskit-navbar-nav{
gap: 30px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a{
padding: 0px 5px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a::before{
content: '';
width: 0%;
height: var(--line-height);
border-radius: 20px;
background: var(--line-color);
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::before{
width: 100%;
}
</style>
Underline Effect Scale
<style>
/* Line Height and Change Color */
:root{
--line-color: #000;
--line-height: 3px;
}
.twd-menu-hover .elementskit-navbar-nav{
gap: 30px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a{
padding: 0px 5px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a::before{
content: '';
width: 100%;
height: var(--line-height);
border-radius: 20px;
scale: 0;
background: var(--line-color);
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::before{
scale: 1;
}
</style>
Underline and Overline Effect
<style>
/* Line Height and Change Color */
:root{
--line-color: #000;
--line-height: 3px;
}
.twd-menu-hover .elementskit-navbar-nav{
gap: 30px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a{
padding: 0px 5px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a::before{
content: '';
width: 0%;
height: var(--line-height);
border-radius: 20px;
background: var(--line-color);
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::before{
width: 100%;
}
.twd-menu-hover .elementskit-navbar-nav li a::after{
content: '';
width: 0%;
height: var(--line-height);
border-radius: 50px;
background: var(--line-color);
position: absolute;
right: 0;
top: 0;
transition: 0.3s ease-in;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::after{
width: 100%;
}
</style>
Bridge Underline Effect
<style>
/* Line Height and Change Color */
:root{
--line-color1: #000;
--line-color2: #000;
--line-height: 3px;
}
.twd-menu-hover .elementskit-navbar-nav{
gap: 30px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a{
padding: 0px 10px !important;
}
.twd-menu-hover .elementskit-navbar-nav li a::before{
content: '';
width: 0%;
height: var(--line-height);
border-radius: 20px;
background: var(--line-color1);
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s ease-in;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::before{
width: 100%;
}
.twd-menu-hover .elementskit-navbar-nav li a::after{
content: '';
width: 3px;
height: 0%;
border-radius: 50px;
background: var(--line-color2);
position: absolute;
right: 0;
bottom: 0;
transition: 0.3s ease-in;
transition-delay: 0.3s;
}
.twd-menu-hover .elementskit-navbar-nav li a:hover::after{
height: 100%;
}
</style>
If you want to create more such effects using Elementor, then do subscribe to the YouTube channel.