带有下划线动画的响应式菜单

Question

我正在制作一个带有目标滑动下划线的菜单，我真的很接近，但我无法让它响应。调整窗口大小时，“下划线”不会停留在链接的中心。

这是JSFiddle

nav {
    margin-top:30px;
    font-size: 15pt;
    background: #FFF;
    position: relative;
    width: 100%;
    height:50px;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    float: left;
    padding: 2% 0;
    width: 33.33%;
    text-decoration: none;
    transition: .4s;
    color: red;
}
 .effect {
    position: absolute;
    left: 22.5%;
    transition: 0.4s ease-in-out;
}
nav a:nth-child(1):target ~ .effect {
    left: 22.5%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 56%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 90%;
    /* the middle of the third <a> */
}
.ph-line-nav .effect {
    width: 34px;
    height: 2px;
    bottom: 5px;
    background: blue;
    margin-left:-50px;
}

Answer 1

每个元素的宽度为 33.33%。将其分成两半，即 16.66%，这将是元素的中心。使用 16.66% 作为默认 left 值会将.effect 的左边缘放在第一个元素的中心。要将.effect 居中在真正的中心，请使用translateX() 将其向后移动50%。

所以第一个元素的左边应该是 16.66%。

第二个元素将是 49.99% (99.99 / 2)

第三个元素将是 83.33%（99.99 - 16.6 或 66.66 + 16.66）

nav {
    margin-top:30px;
    font-size: 15pt;
    background: #FFF;
    position: relative;
    height:50px;
    display: flex;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    padding: 2% 0;
    flex-basis: 33.33%;
    text-decoration: none;
    transition: .4s;
    color: red;
}
 .effect {
    position: absolute;
    left: 16.66%;
    transition: 0.4s ease-in-out;
    transform: translateX(-50%);
}
nav a:nth-child(1):target ~ .effect {
    left: 16.66%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 49.99%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 83.33%;
    /* the middle of the third <a> */
}
.ph-line-nav .effect {
    width: 34px;
    height: 2px;
    bottom: 5px;
    background: blue;
}

<nav class="ph-line-nav">
    <a href="#A1" id="A1">AA</a>
    <a href="#A2" id="A2">AA</a>
    <a href="#A3" id="A3">AA</a>
    <div class="effect"></div>
</nav>