Featured

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



Published
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:
Category
Web design
Be the first to comment