How to animate links within a coded hamburger menu

I'd like to animate my main nav links like the text links on the rest of the site but can't figure out how to make that work within my coded hamburger menu.

My current link styling uses '.sqs-block-html' before the 'a'. When I remove this, it applies to the nav items, however since the width is set to 100%, the animated underline spans the width of the full page, rather than just the text link. 

Additionally, I'd like to change the effect of the active link from an underline to a color. 

Here's my code:

//MAIN NAV - BURGER//
.header-burger { 
  display:flex!important;
}
.header--menu-open .header-menu {
  opacity: 1!important;
  visibility: visible!important;
}
.header-nav, .header-actions {
  visibility:hidden!important;
}
.header-menu-bg {
  background-color: transparent!important;
background-image: url(https://static1.squarespace.com/static/65010a6ac8fb780f53c6c122/t/657793b141583135cadc91cf/1702335413616/AdobeStock_285630545.jpeg);
background-size: 1600px;
}
.header-menu-nav {
  text-align: center!important; 
  margin-left: 0%!important;
}
.header-menu-nav a:hover {
    color: #897b4e !important;
}

//LINK HOVER STYLING//
  .sqs-block-html a {
  position: relative;
    text-decoration: none;
}
.sqs-block-html a::before {
    content: '';
  position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: #b2997b;
    bottom: -3px;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
.sqs-block-html a:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}

Hi,

Can you share site url? We can check problem easier