元素底部的悬停状态

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.