Как сделать hover after анимацию ссылки в две строки?

Question

Anonimmus @Anonimmus

CSS

Как сделать hover after анимацию ссылки в две строки?

<a href="#0" class="__link">Асфальтирование дорог</a>

.__link::before {
    content: "";
    height: 35%;
    background-color: #f9931d;
    position: absolute;
    bottom: 2px;
    width: 113%;
    left: -5px;
    right: -5px;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: -2;
    -webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;
}
.__link::after {
    content: "";
    width: 113%;
    height: 35%;
    background-color: #f9931d;
    opacity: 30%;
    position: absolute;
    bottom: 2px;
    left: -5px;
    right: -5px;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: -2;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;
}
.__link:hover::before {
    content: "";
    width: 100%;
    height: 35%;
    background-color: #f9931d;
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 113%;
    left: -5px;
    right: -5px;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: -1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;
    z-index: -2;
}

Помогите плиз незнаю как можно решить такую фигню при ссылке в две строки. Неожидал что контент будет в две строки.
У ссылки есть подчеркивание при помощи before & after. при наведении before плавно передвигается за текстом. Проблема заключается в том что если текст будет в две строки такая анимация увы не сработает так как задумал сюкаДизайнер