Изменение части border'а при наведении на элемент

.nav-menu { 
  margin-top: 33px; 
  border-top: 1px solid #ececec; 
} 
 
nav a { 
  padding: 0 20px; 
  border-right: 1px solid #ececec; 
  display: inline-block; 
  position: relative 
} 
 
nav a:hover { 
  color: #f03c3c; 
} 
 
nav a:hover::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: -34px; 
  height: 2px; 
  background-color: #f03c3c; 
}

<div class="nav-menu"> 
  <nav> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
  </nav> 
</div>