菜单项下划线在 hover state 末尾垂直收缩

Question

I am having hard time to understand why underline is shrinking at the end of hovering state (small vertical shrink). Code itself is simple and there shouldn't be anything that shrinks this pseudo element. The same thing is happening in this editor. But, this effect isn't happening on Mozilla for example. So my question is: Am I missing something or is this something Google chrome has with?

 a{ text-decoration: none; }.header{ z-index: 1; height: 100px; width: 100%; position: absolute; }.main-header{ background-color: var(--menu-header-background); top: var(--header_height); text-shadow: 0 2px 5px rgba(0, 0, 0, .2); }.small-header{ height: var(--header_height); background-color: rgba(0, 0, 0, 0.63); } li{ list-style-type: none; }.header-container{ max-width: 1100px; margin: auto; height: inherit; }.navigation{ float: right; height: inherit; }.navigation{ float: right; height: inherit; } header.navigation a li{ display: table-cell; vertical-align: middle; color: black; text-transform: uppercase; height: inherit; } #main-menu li:hover{ color: blue; transition: .4s; } #main-menu a{ position: relative; } #main-menu li::after{ content: ''; position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%) scaleX(0); width: 100%; height: 2px; background-color: blue; transition: transform.25s; } #main-menu li:hover::after{ transform: translateX(-50%) scaleX(1); }

 <header class="main-header header"> <div class="header-container"> <ul class="navigation" id="main-menu"> <a href="#"> <li>home</li> </a> <a href="#"> <li>about me</li> </a> <a href="#"> <li>projects</li> </a> <a href="#"> <li>contact me</li> </a> </ul> </div> </header>

Answer 1

This a bug about transform. Adding a dummy box-shadow and will-change: transform will fix the bug.

 a{ text-decoration: none; }.header{ z-index: 1; height: 100px; width: 100%; position: absolute; }.main-header{ background-color: var(--menu-header-background); top: var(--header_height); text-shadow: 0 2px 5px rgba(0, 0, 0, .2); }.small-header{ height: var(--header_height); background-color: rgba(0, 0, 0, 0.63); } li{ list-style-type: none; }.header-container{ max-width: 1100px; margin: auto; height: inherit; }.navigation{ float: right; height: inherit; }.navigation{ float: right; height: inherit; } header.navigation a li{ display: table-cell; vertical-align: middle; color: black; text-transform: uppercase; height: inherit; } #main-menu li:hover{ color: blue; transition: .4s; } #main-menu a{ position: relative; } #main-menu li::after{ content: ''; position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%) scaleX(0); width: 100%; height: 2px; background-color: blue; transition: transform.25s; /* added */ will-change: transform; box-shadow: 0 0 1px rgba(255, 255, 255, 0); } #main-menu li:hover::after{ transform: translateX(-50%) scaleX(1); }

 <header class="main-header header"> <div class="header-container"> <ul class="navigation" id="main-menu"> <a href="#"> <li>home</li> </a> <a href="#"> <li>about me</li> </a> <a href="#"> <li>projects</li> </a> <a href="#"> <li>contact me</li> </a> </ul> </div> </header>

---

^{My refer answer}

Answer 2

Firstly, the line underneath the menu-item shrinks because when you hover the menu item, it changes the scaleX from 0 to 1:

from: transform: translateX(-50%) scaleX(0);
to: transform: translateX(-50%) scaleX(1);

and you have transition property on transform because of which the line shrinks smoothly.

It is not working on Mozilla Firefox because you haven't added anyvendor prefixes . You need to add prefixes to both transition and transform properties to ensure maximum compatibility.

Try using these in your style:

a {
    text-decoration: none;
}
.header{
    z-index: 1;
    height: 100px;
    width: 100%;
    position: absolute;
}
.main-header{
    background-color: var(--menu-header-background);
    top: var(--header_height);
    text-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
.small-header{
    height: var(--header_height);
    background-color: rgba(0, 0, 0, 0.63);
}
li{
    list-style-type: none;
}
.header-container{
    max-width: 1100px;
    margin: auto;
    height: inherit;
}
.navigation{
    float: right;
    height: inherit;
}
.navigation{
    float: right;
    height: inherit;
}
header .navigation a li{
    display: table-cell;
    vertical-align: middle;
    color: black;
    text-transform: uppercase;
    height: inherit;
}
#main-menu li:hover{
    color: blue;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}
#main-menu a{
    position: relative;
}
#main-menu li::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    -webkit-transform: translateX(-50%) scaleX(0);
        -ms-transform: translateX(-50%) scaleX(0);
            transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background-color: blue;
    -webkit-transition: -webkit-transform .25s;
    transition: -webkit-transform .25s;
    -o-transition: transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s;
}
#main-menu li:hover::after{
    -webkit-transform: translateX(-50%) scaleX(1);
        -ms-transform: translateX(-50%) scaleX(1);
            transform: translateX(-50%) scaleX(1);
}