How to change width of custom underline on nav dropdown?

Site URL: https://www.thebevystore.online/shop-bevy

Hello, 

I have a custom nav underline but on dropdown it extends further than I would like it to (see screenshot). I would like to shorten the length of it but can't figure out how to do this. I have tried width % etc. but it is not working. 

This is the code I have: 

.header-nav-item--active a {
   border-bottom: 4px solid #FF7CBD !important;
   background-image: none !important;
   
}

Anyone have any ideas? 

Hi,

Use the text-decoration property instead of border-bottom 🙂 Below are some examples:

  text-decoration: underline;
  text-underline-position: under;
  text-decoration-style: solid;
  text-decoration-color: #FF7CBD;
  text-decoration-thickness: 8px;