How can I get the ::after and ::before to be equal in height and align equally?

I have a link effect.

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.

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.

: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 > li + li {
  margin-left: 1.5em;
}

.nav-menu > li > 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 > li > a::before,
.nav-menu > li > 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 > li > a::before {
  top: 0;
  left: 0;
  transform: rotate(90deg);
  transform-origin: top left;
}

.nav-menu > li > a::after {
  right: 0;
  bottom: 0;
  transform: rotate(90deg);
  transform-origin: top right;
}

/* .nav-menu > li > a.active::before,
.nav-menu > li > a.active::after, */
.nav-menu > li > a:hover::before,
.nav-menu > li > a:hover::after {
  left: 50%;
  transform: rotate(0deg) translateX(-50%);
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="linkhover-fancy2.css">
  <title>Link Hover Effect</title>
</head>
<body>
  <nav class="nav">
    <ul class="nav-menu">
      <li><a href="#" class="active blue">Home</a></li>
      <li><a href="#" class="red">About</a></li>
      <li><a href="#" class="green">Services</a></li>
      <li><a href="#" class="orange">Prices</a></li>
      <li><a href="#" class="violet">Contact</a></li>
    </ul>
  </nav>
  <script> </script>
</body>
</html>

Answer

I would do it differently like below:

*,
*::before,
*::after {
  box-sizing: border-box;
}

.nav-menu {
  display: flex;
  padding: 0;
  list-style: none;
}

.nav-menu > li + li {
  margin-left: 1.5em;
}

.nav-menu > li > a {
  display: block;
  font-size: 2rem;
  color: #0e9daf;
  padding: 0 20px;
  height: 40px;
  text-decoration: none;
  position: relative;
  outline: 1px solid red;
}

.nav-menu>li>a::before,
.nav-menu>li>a::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  background: #0e9daf;
  transition: all 0.3s;
  transform: rotate(90deg);
}

.nav-menu>li>a::before {
  left: 0;
  top: 0;
  transform-origin: top left;
}

.nav-menu>li>a::after {
  right: 0;
  bottom: 0;
  transform-origin: bottom right;
}

.nav-menu>li>a:hover::before {
  left: calc(50% - 20px);
}

.nav-menu>li>a:hover::after {
  right: calc(50% - 20px);
}

.nav-menu>li>a:hover::before,
.nav-menu>li>a:hover::after {
  transform: rotate(0deg);
}
<nav class="nav">
  <ul class="nav-menu">
    <li><a href="#" class="active blue">Home</a></li>
    <li><a href="#" class="red">About</a></li>
    <li><a href="#" class="green">Services</a></li>
    <li><a href="#" class="orange">Prices</a></li>
    <li><a href="#" class="violet">Contact</a></li>
  </ul>
</nav>