.custom-link {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: padding .3s ease-out;
    width: fit-content !important;
    padding-left: 1.5em;
}

.custom-link::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 1em;
    height: 2px;
    transform: translateY(-50%);
    transition: width .3s ease-out;
    background-color: var(--text-color);
}

.custom-link:hover {
    padding-left: 4.5em;
}


.custom-link:hover::before {
    width: 4em;
}