Как анимировать псевдокласс наведения: после и: до?

Кто-то знает, как сделать эти эффекты наведения, анимирующие псевдоклассы :after и :before??

https://tympanus.net/Development/CreativeButtons/

спасибо, я пытаюсь научиться, мне не нужен лист, чтобы купить или скачать

Я только что проанализировал это, и кажется, что есть элемент:

Кнопка раздела p (кнопка p, которую я обнаружил, является лучшим способом центрирования, очень приятно)

класс для кнопки:

.btn

обычный псевдокласс для основных эффектов наведения:

.btn:hover

псевдокласс после и до:

.btn:after

.btn:before

чего я не понимаю, так это как анимировать .btn:after и .btn:before

здесь у меня есть справочный лист, который я делаю для себя, где вы можете видеть (css не сухой, потому что это справочный лист, и в будущем я могу использовать его для поиска определенного объекта, класса для повторного использования или изменения

https://codepen.io/Heavybrush/pen/bWgXpx


person Heavybrush    schedule 28.04.2017    source источник
comment
нравится? codepen.io/mcoker/pen/YVZajw   -  person Michael Coker    schedule 28.04.2017
comment
да, я нашел, я нашел проблему, это был z-индекс, не указанный в других элементах, все равно большое спасибо :)   -  person Heavybrush    schedule 28.04.2017