Hover-State at bottom of element - html

Question

I am currently developing a styleguide and the hover-state of my navigation is giving me some headache, but I am pretty sure, that it could be solved very easily, so I just want to ask, if someone has an idea.
My html looks like this:
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem'><a href='#'>Design</a></li>
<li class='components__navItem' id='active'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
and my css looks like this:
.components__navigation {
display: flex;
height: 75px;
align-items: center;
padding-left: 50px;
border-bottom: 4px solid #f5f5f5;
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
margin-right: 50px;
}
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem a:hover {
background-size: 100% 3px,auto;
}
#active a {
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 100% 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
}
Here is a pen to make it more visual:
https://codepen.io/dbljn/pen/abbMdVE
The current hover-state is right under the font of the tabs, but I want the hover-state to be where the gray border is. Like so:
Do you have an idea? And thanks a lot!!

Answer 1

It is always a good practice to write similar styling rules when the elements are overlapping on each other.
for example, we could use the same background-image property with nav html element instead of border property
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
remove the margin from ul element and background-image from below selectors so that the nav element will spread on li element and will be dynamic
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
finally give the li element its background-image and other CSS rules,
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
Since you want the animation while hovering on li element, the :hover pseudo attribute should be present on this li element, also it's good to use classes instead of id
.components__navItem:hover, .active {
background-size: 100%;
}
Finally putting it all together,
body, html {
margin: 0;
}
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem:hover, .active {
background-size: 100%;
}
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem active'><a href='#'>Design</a></li>
<li class='components__navItem'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>

Answer 2

Try replacing .components__navItem a with:
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
padding-bottom: 33px;
}
This is assuming a fixed font size though.