title: How can I get the ::after and ::before to be equal in height and align equally?
body: <p>I have a link effect.</p>
  <p>I added the red so you can see the left and right borders (the ::before and ::after) are not positioned to both touch the red border equally. The border on the right runs out a little bit. It's probably more apparent if you look at it in full screen.</p>
  <p>On the other hand the hover effect is fine. That should be like that. I mean the effect after you move the mouse on the item.</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>:root {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .nav-menu {
    display: flex;
    margin: 50px;
    padding: 0;
    list-style: none;
  }
  
  .nav-menu &gt; li + li {
    margin-left: 1.5em;
  }
  
  .nav-menu &gt; li &gt; a {
    display: block;
    font-size: 2rem;
    color: #0e9daf;
    padding: 0 20px;
    height: 40px;
    /* line-height: 45px; */
    text-decoration: none;
    /* transition: color 0.3s ease-in-out; */
    position: relative;
    border: 1px solid red;
  }
  
  .nav-menu &gt; li &gt; a::before,
  .nav-menu &gt; li &gt; a::after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 2px;
    /* opacity: 0.2; */
    /* pointer-events: none; */
    background: #0e9daf;
    transition: all 0.3s;
  }
  
  .nav-menu &gt; li &gt; a::before {
    top: 0;
    left: 0;
    transform: rotate(90deg);
    transform-origin: top left;
  }
  
  .nav-menu &gt; li &gt; a::after {
    right: 0;
    bottom: 0;
    transform: rotate(90deg);
    transform-origin: top right;
  }
  
  /* .nav-menu &gt; li &gt; a.active::before,
  .nav-menu &gt; li &gt; a.active::after, */
  .nav-menu &gt; li &gt; a:hover::before,
  .nav-menu &gt; li &gt; a:hover::after {
    left: 50%;
    transform: rotate(0deg) translateX(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="linkhover-fancy2.css"&gt;
    &lt;title&gt;Link Hover Effect&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav class="nav"&gt;
      &lt;ul class="nav-menu"&gt;
        &lt;li&gt;&lt;a href="#" class="active blue"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="red"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="green"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="orange"&gt;Prices&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="violet"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;script&gt; &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>