Как реализовать такое нижнее подчеркивание?

Question

[vahromeevilya-widestudio]

Добрыйд день. Есть сайт https://pmdtec.com/en/ , на нем есть очень интересный hover эффект на этом блоке

Я уже поотключал все свойства , но никак не могу понять, как же это реализовано.
Когда применяю у себя на сайте, у меня только одно полоска внизу и все.
Можете подсказать как это сделать? Желательно codepen

Answer 1

[Алексей Уколов]

Градиент в background плюс анимация background-size. Видно же всё прекрасно на сайте:

Comments

[vahromeevilya-widestudio]

В том и проблема, даже полностью копируя код с сайта, не получается воспроизвести почему то

[Алексей Уколов]

Ну, тут сложный селектор, видимо, вы с ним путаетесь. Но селектор не имеет отношения к вопросу, он может быть любым.
Вы свой Codepen покажите.

Answer 2

[Danny Arty]

Зачем отключать свойства? Это ведь эффект при hover-е. Так откройте devTools, выберите интересующий вас элемент и посмотрите на его стили, далее нажмите правой кнопкой мыши на него и в контекстном меню выберите Force state -> Hover и снова смотрите стили.
На сайте из вашего вопроса сделано так:

Comments

[vahromeevilya-widestudio]

Хорошо, буду разбираться. Просто на моем сайте почему-то когда я сделал как у вас в codepen не сработало. Значит косяк где то на моем сайте