Underline Hover Animation On Elementor Pro | Grow line divider widget on hover

Learn how to add a line that grows on hover.

/*CSS Underline*/
selector::after {
content: '';
display: block;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;


selector:hover::after {
width: 40%;
background: #B67CF9; /*change background here*/

/*Grow divider*/

selector .elementor-divider-separator{
transition: transform 0.5s;
transform-origin: center !important;

selector:hover .elementor-divider-separator{
transform: scaleX(4) !important;

Hire Me:
Web design
Be the first to comment