Responsive menu with underline animation

I'm working on a menu with a sliding underline with target, I am really close but I can't figure to make it responsive. The "underline" doesn't stick at the center of the link when resizing the window.

Here is a 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;
}

Each element is 33.33% wide. Divide that in half, that's 16.66%, so that will be the center of the element. Using 16.66% as the default left value will put the left edge of .effect in the center of the first element. To center the .effect in the true center, move it back 50% of it's own with with translateX().

So the first element's left should be 16.66%.

The second element will be 49.99% (99.99 / 2)

The third element will be 83.33% (99.99 - 16.6 or 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>