Custom underline for active nav tab

Hi,

Im have a custom squiggly line I drew that I want to use as an underline for my active tab in my nav. I was wondering if its possible to do that with the css 

Please send the site url and your drawn image, i will help place it

kazoo-sparrow-xwe9.squarespace.com

password: fall

Is this good

.header-nav-item:hover a,
.header-nav-item--active a {
  display: inline-block;
  position: relative;
}
.header-nav-item:hover a:after,
.header-nav-item--active a:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 15px;
    left: 0;
    bottom: 0;
    background: url(//content.invisioncic.com/p289038/monthly_2020_11/Underlined.thumb.png.be6b54785e0850b97144cb2ab7b805a6.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Thank you, thats about right. Is there a way for it to not overlap?

31 minutes ago, quag said:

Thank you, thats about right. Is there a way for it to not overlap?

Change value bottom to negative value, so far it 0