How is this hover effect made? [closed]

Navigation
-4

It's the colorful ribbon that expands ...

    
asked by anonymous 11.12.2016 / 19:16

1 answer

7

The trick is to use transform associated with the pseudo element :after and with a transition in zoom, type magnifying effect.

Something like this: 

div {
    width: 150px;
}
div:after {
    display: block;
    content: '';
    border-bottom: 5px solid #2e7061;
    transform: scaleX(0);
}
div:hover:after {
    transform: scaleX(1);
    transition: transform 325ms ease-in-out;
}
<div>Traz aqui o mouse!</div>
    
11.12.2016 / 19:25
What is the error in the conditional? [closed] Convert minutes to hours