title: Responsive menu with underline animation
body: <p>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.</p>
  
  <p>Here is a <a href="https://jsfiddle.net/Leshautsdurant/bhtxkgp3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>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 &lt;a&gt; */
  }
  nav a:nth-child(2):target~ .effect {
      left: 56%;
      /* the middle of the second &lt;a&gt; */
  }
  nav a:nth-child(3):target ~ .effect {
      left: 90%;
      /* the middle of the third &lt;a&gt; */
  }
  .ph-line-nav .effect {
      width: 34px;
      height: 2px;
      bottom: 5px;
      background: blue;
      margin-left:-50px;
  }
  </code></pre>