Как сделать плавное появление границы на css?

Question

[cursedgrail]

И вопрос мой не такой простой, как вы могли бы подумать изначально.
Я не помню, где видел такое, поэтому ссылок дать не могу.
Мне нужно, чтобы при наведении на ссылку, из самой середины ссылки появлялась граница, которая бы, скажем, за 0.1 секунды увеличивалась в ширине до ширины всей ссылки.
То есть, например, изначально цвет границы либо прозрачный либо совпадает с цветом фона, ширина границы равна 1 пикселю, а сама граница как бы расположена по центру, а при наведении на ссылку граница меняет свой цвет на другой и за 0.1 секунды увеличивает свою ширину до всей ширины ссылки.
Как реализовать что то подобное?
Желательно, без костылей в виде блоков-подложек.

Answer 1

[Сергей Горячев]

https://jsfiddle.net/rpdwwqpa/
или тут хорошая подборка эффектов
https://tympanus.net/Development/CreativeLinkEffects/

Comments

[cursedgrail]

Идеально.