Hyperlink animation on forced mobile nav - fixing to line length of page title

Hi everyone, 

Another one for the brains of the community:

I've got a site with forced mobile nav on desktop (as well as mobile devices, obviously). In addition to this, I've injected css to add animation lefty hyperlink underline on hover. It's working BUT it is currently extending to what I assume is the wrapper for each navigation link, so the link extends way beyond the length of the navigation page title e.g., About looks like this About______  this is based on width on hover at 100%.  Any ideas for how to lock width to text length of nav title?

Here's the code as it stands:

.header-nav-item, h1, h2, h3, h4, p {
  a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
  }
  a:after {
    content: "";
    background: #00ffff;
    height: 2px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
}

Thanks 

Marc

Can you share site url?

Sure thing. Here you go:

https://glide-creative.squarespace.com/

You need to set display: inline-block for a tag, so new code will be

.header-nav-item, .header-menu-nav-item h1, h2, h3, h4, p {
  a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
	display: inline-block !important;
  }
  a:after {
    content: "";
    background: #00ffff;
    height: 2px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
}