Basic nav bar hover effect

Hello FCC,

I need some help getting a basic CSS animation to happen when hovering over my nav bar. I want it to look like this (3 min video). I understand the CSS transformation but I dont get the other CSS thats going on in the video; please help.

I was able to get it to work by changing your html to add the class to the lis:

  <li class="cool-link"><a href="#" class="">Contact</a></li>
  <li class="cool-link"><a href="#" class="">Portfolio</a></li>
  <li class="cool-link"><a href="#" class="">About</a></li>
  <li class="cool-link"><a href="#" class="">Home</a></li>

and then updating your css:

li {
  /* line up nav bar horizontal */
  display: inline-block;
}

li a {
  /* hide black bar under a nav */
  text-decoration: none;
  display: inline-block;
  padding: 8px;
  font-family: "Open Sans";
  color: black;
  font-weight: lighter;
}

a:hover {
  /* hide black bar under a refs */
  text-decoration: none;
}

.header {
  padding-left: 160px;
  padding-top: 150px;
  font-family: "Open Sans";
  font-size: 30px;
}

.nav-bar {
  padding-top: 125px;
  padding-left: 100px;
}

/* Effect */

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: black;
  transition: width .3s;
}

.cool-link:hover::after {
  width: 100%;
  transition: width .3s;
}

Here is a working pen.

How does it work? I’m not CSS wizard, but I think that the after to create a pseudo-element. It creates an element that has nothing in it (the empty string) and is 2px tall. Since it is block level, it wraps to the next line (under our text). It initially has a width of 0 and when we hover it goes to 100% (the width of that container, the li). The transition tells it to take .3 seconds to do it.

Does that make sense?

2 Likes

Wow after looking at your code I figured out what was wrong. I SPELLED HEIGHT WRONG UNDER EFFECT :expressionless: I really appreciate the response Kevin Thank you.

1 Like

Yeah, that’s probably one of my most commonly misspelled words.

A lot of code editors have spellchecker extensions. I use one in VS Code and it has helped me avoid a lot of frustration :pray: