Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by gyatmnucla
gyatmnucla
7,618 Points

How to code this animation

Hi all :) I am currently working on a project and i would like to know how to replicate an animation i saw online. On this site : http://themenectar.com/demo/salient-corporate/ If you look at the top menu, when you hover over the different menu li, an underline forms. Could you tell me how to code this ? Thanks in advance

3 Answers

Fynn Lehnert
Fynn Lehnert
15,244 Points

with the pseudo selector :after you can add extra stuff to an elemten and style it with css.

thats how they did it 

a:after {
    -webkit-transition: width .3s ease-out, left .3s ease-out, border-color .3s ease-out;
    transition: width .3s ease-out, left .3s ease-out, border-color .3s ease-out;
    position: absolute;
    display: block;
    bottom: -6px;
    left: 50%;
    width: 0;
    border-top: 2px solid #000;
    content: '';
    padding-bottom: inherit;
}

this is the trigger that occurs on :hover

a:hover:after {
    width: 100%;
    left: 0;
}

the important part here is the content:''; its "creating" the :after. without it, youd see nothing.

happy coding!

gyatmnucla
gyatmnucla
7,618 Points

I tried this, it didn't work.. What am I doing wrong ? Thanks btw :)

.sf-menu li a {
    font-family: 'Varela Round'!important;
    font-size: 16px!important;
    color: white!important;
    line-height: 20px!important;
}
.sf-menu li a:after {
    -webkit-transition: width .3s ease-out, left .3s ease-out, border-color .3s ease-out;
    transition: width .3s ease-out, left .3s ease-out, border-color .3s ease-out;
    position: absolute;
    display: block;
    bottom: -6px;
    left: 50%;
    width: 0;
    border-top: 2px solid #000;
    content: '';
    padding-bottom: inherit;
}

.sf-menu li a:hover:after {
    width: 100%!important;
    left: 0!important;
}
Fynn Lehnert
Fynn Lehnert
15,244 Points
Fynn Lehnert
Fynn Lehnert
15,244 Points

put your code up to codeshare.io. tweet me the link @ mefynn ill be able to help you there

gyatmnucla
gyatmnucla
7,618 Points
gyatmnucla
gyatmnucla
7,618 Points

I found my way :D