Variation 1: text underlines in navigation

- [Rik] Variation number one, how do we get these underlines on our navs? Now, again, what would we want to do on ours? Well, we'd have an underline on the selected, or this hovered one. So, again, just gonna go back to my project, at the moment we can tell which ones are selected, or hovered, because we added some code in. So this is all again to do with the look of the site, so again I'm gonna find where we have our underline. Here we go, we have the hover, and selected.

So what we want to do here is add a underline. Now, there's two ways to do this. We can add a text decoration, we can put the underline back in. So I could add text-decoration: underline, let's see how that looks. There we go, it's underlined. Again I can hover and these come in. Now the way that I like to do this is actually used in the border like we did in our form. So, instead, I'm gonna get rid of this and replace this with a default.

So the default is on our link up here, the border is gonna have a 2px solid and this one is currently, I'm gonna keep it, as white. We're gonna get rid of this in a minute. So let's see this in action. So now all of them have this border, but I don't want it around all of this, I just want it on the bottom. So, to make it just on the bottom what we're gonna do is we're gonna make this change: border, not everywhere, just the border on the bottom.

So now, what we'll see everywhere is this little underline up here that looks pretty good. Now, I just want this underline to appear here. I want to change this underline to be pink, so, what I'm gonna just quickly do is the same thing as what I've done here, but just for hover and selected. So the border-bottom here is 2px solid, but also this pink color from above, so I'm gonna paste that in. So this one is the default, it's the underline on the bottom which is white, this is the border bottom, pink, or salmon, and there we see that.

Now what I can also do, as you can see here, it kinda changes color, I wanna make this transparent underneath it. So, what I'm gonna do instead of this being white, is remove this text, and the hash, and just write the word transparent in. The reason for doing this is I can actually add a fade in here as well, which is pretty cool. So here what you can see is this pops in, but the moment these transition between white and salmon, the border just pops up instantly.

What I can also do is add this transition in for here, for this border bottom. So I've got my color, which is 0.3s, at the end of this before I have the semicolon I can do a comma, and say the border-bottom 0.3s. So I've got my color changing over one 0.3s and my border-bottom is changing over 0.3s too. So now what I see is this kind of hover effect come in place, and it looks pretty good. So here what I have is this underline effect, looks pretty good, very easy to add it in.