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

Опубликовано: 29 Сентябрь 2024
на канале: Uriel Soto

20,747

238

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;
}

🔵 Join Our Facebook Community!
http://bit.ly/urielsotofbgroup

🟢 Tech Support:
https://urielsoto.com/services/

🟢 My Web Agency:
https://vluxdesigns.com/

MY COURSES:

🟣 Elementor Mobile Responsive Course
https://bit.ly/elementormobile

🟣 Website Building Factory Course
https://bit.ly/websitebuildingfactory

PRODUCTS I USE FOR MY WEBSITES:

🔴 Get Elementor Pro - My Favorite Page Builder
http://bit.ly/urielelementorpro

PRIVATE GROUP:

🔵 Join My Patreon & Get Design Downloads
https://bit.ly/uspatreon

CONTACT ME:

My Website: http://urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a