Responsive menu with underline animation - css

Question

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;
}

Answer 1

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">
AA
AA
AA
<div class="effect"></div>
</nav>