How to remove unnecessary additional underline on hover from active navigation links?

I have some CSS defining an animated underline style upon hover, for my navigation links. Currently, this applies to inactive links on hover, which is perfect. Active links retain this underline as well. The issue is that this code also applies to active links that already have this underline.

This creates an additional underline on top of the existing one, making it twice as thick in appearance. Is there something that can be tweaked in my navigation CSS to fix this? Once a link is active, I'd prefer the underline to remain static and unchanged.

body .active-link>a, .text .active-link>a:visited {
   border-bottom: 1px solid #000;
   margin: 0 11px;
   padding: 0 !important;
   }

.horizontal-navigation-bar nav ul li a:after {
   content: '';
   display: block;
   height: 1px;
   width: 0;
   background: transparent;
   transition: width .5s ease, background-color .5s ease;
   }

.horizontal-navigation-bar nav ul li a:hover:after {
   background: #000;
   width: 100%;
   }

For reference, my site is: www.tylercharboneauprofessional.com

Solution

The simplest fix is to...

.horizontal-navigation-bar nav ul li a:after {
  margin-bottom: -1px;                             /* ... add this line */

(make them overlap and simply don't care.)