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:
/*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