/*CSS*/
.text__underline {
    transform: translateX(-300%);
    transition: 0.7s;
}
.header__nav-button {
    max-width: fit-content;
    overflow: hidden;
}
.header__nav-button:hover .text__underline {
    animation: toMiddlePos 0.7s;
    transform: translateX(0);
    opacity: 100%;
}
.header__nav-button:not(:hover) .text__underline {
    transform: translateX(300%);
    opacity: 0;
}
@keyframes toMiddlePos {
    from {
        transform: translateX(-300%);
    }
    to {
        transform: translateX(0);
    }
}
/*CSS*/

/*HTML markup*/
<a class="button header__nav-button">
  <span>Your text</span>
  <div class="content-list-item__line line-primary text__underline line__black" style="width: 0%; 	display: block; height: 1px;" />
</a>
/*HTML markup*/