Как сделать начало анимации с другой стороны?

Question

[Tapuz]

Добрый день!
У меня есть код, который анимарует подчеркивание ссылок, при этом анимация начинается слева. Как сделать чтобы она начиналась справа?

.p-ynz2174 .pagelayer-wp-menu-container ul li a {
    display: inline-block;
    color: #76431f;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.p-ynz2174 .pagelayer-wp-menu-container ul li a:after {
    background-color: #14a1d7;
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-out;
    transition: width .3s ease-in-out;
}
.p-ynz2174 .pagelayer-wp-menu-container ul li a:hover:after,
.p-ynz2174 .pagelayer-wp-menu-container ul li a:focus:after {
    width: 100%;
}

Answer 1

[Арсений Матыцин]

Дешево и сердито — так: https://codepen.io/i-am-studio_ru/pen/BaWymoy?edit...
А в целом есть смысл и на абсолютном позиционировании.

Comments

[Tapuz]

Спасибо за помощь, но что-то не могу сконвертировать его в обычный CSS

[Арсений Матыцин]

Tapuz, в сервисе функция есть. Впрочем код элементарный.

[Andreyweb30]

.p-ynz2174 .pagelayer-wp-menu-container ul li a:after {
margin-left: auto;//добавить
}

[Tapuz]

Andreyweb30, Спасибо, работает, но почему-то подчеркивается блок на всю ширину, а не на ширину ссылки.

[Andreyweb30]

Tapuz,
position:relative; для ссылок попробуй.

[Tapuz]

Andreyweb30, Не помогает... Не посмотрите в чем проблема? Вот сайт, там в футере эти ссылки. В верхнем меню такие же, но там все работает как надо. Спасибо.

[Andreyweb30]

Тяжело так сказать , там куча span в самом теге ссылки ,он занимает всю ширину меню , вам нужно поменять свойства span сделать его строчным
span pagelist-list-icon-holder
Задайте inline-block

[Tapuz]

Andreyweb30, Спасибо, ваше решение помогло!