title: navbar hover effect above horizontal rule
body: <p>I am designing a new website, and I always spend a lot of time on the navigation bars when I do so. The following code has this intended effect:</p>
  
  <p><a href="https://i.stack.imgur.com/HzFfF.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HzFfF.gif" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;a href="index.html"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About&lt;/a&gt;
  &lt;/div&gt;
  &lt;hr&gt;&lt;/hr&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>hr {
      width: 80%;
      border: 0;
      height: 1px;
      margin-top: 0px;
      background-color: #000;
  }
  
  .navbar {
      text-align: center;
  }
  
  .navbar a {
      display: inline-block;
      position: relative;
      text-align: center;
      color: #000;
      text-decoration: none;
      font-size: 20px;
      overflow: hidden;
      top: 5px;
      padding-bottom: 10px;
      padding-top: 10px;
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .navbar a:after {
      content: "";
      position: absolute;
      background-color: #c00;
      height: 2px;
      width: 0%;
      transform: translateX(-50%);
      left: 50%;
      bottom: 0;
      transition: .35s ease;
  }
  
  .navbar a:hover:after {
      width: 100%;
  }
  </code></pre>
  
  <p>This works in Chrome, Opera, and even some versions of Internet Explorer, but the other browsers can't agree on anything:</p>
  
  <p>Firefox (and some IE versions):</p>
  
  <p><a href="https://i.stack.imgur.com/JOWr8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOWr8.gif" alt="enter image description here"></a></p>
  
  <p>Safari:</p>
  
  <p><a href="https://i.stack.imgur.com/yp2h7.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yp2h7.gif" alt="enter image description here"></a></p>
  
  <p>here is a code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>hr {
      width: 80%;
      border: 0;
      height: 1px;
      margin-top: 0px;
      background-color: #000;
  }
  
  .navbar {
      text-align: center;
  }
  
  .navbar a {
      display: inline-block;
      position: relative;
      text-align: center;
      color: #000;
      text-decoration: none;
      font-size: 20px;
      overflow: hidden;
      top: 5px;
      padding-bottom: 10px;
      padding-top: 10px;
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .navbar a:after {
      content: "";
      position: absolute;
      background-color: #c00;
      height: 2px;
      width: 0%;
      transform: translateX(-50%);
      left: 50%;
      bottom: 0;
      transition: .35s ease;
  }
  
  .navbar a:hover:after {
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar"&gt;
      &lt;a href="index.html"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About&lt;/a&gt;
  &lt;/div&gt;
  &lt;hr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to achieve the intended effect without browser sniffing? </p>