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

Animation doesn't work

Hi all :) I am currently working on a project and i am trying 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 where i am wrong ? Thanks in advance

I tried this but it doesn't work

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

2 Answers

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points

Not sure why you posted this twice but can you give us your html and css both? I want to play with it in code pen and see what is going on.

Thanks.

gyatmnucla
gyatmnucla
7,618 Points

Well this is for a WordPress, so i can't really share it i think (i have it on local)...

Johan Delforge
Johan Delforge
13,317 Points
Johan Delforge
Johan Delforge
13,317 Points

Is it not simply about needing 2x double dot for the "after" ?

.sf-menu li a::after {...}
.sf-menu li a:hover::after {...}