7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Before and After

Hello and welcome back to Practical Web Animation. Over the next few lessons we're gonna start talking about how to animate content that doesn't yet exist in our HTML. And we're gonna do that specifically using the before and after pseudo elements in CSS or pseudo classes I should say. So we're gonna start off pretty simple and what we're gonna do in this particular lesson, is we're gonna create a hover effect. So that when we hover over each of our buttons here, we will see a pair of brackets animate out to the sides. So we hover over Contact Us and we'll see a square bracket on the left and then the closing square bracket animate out to the right. So the URL for the starting pen here can be found in your course notes. And once you open that up, let's click on the Fork button to create our own new copy of it, and then we'll get started. So our nav is setup just like we've done before and our CSS is setup the same way as well. The only difference so far is our background color. And what I wanna do is, I wanna create a before and after pseudo-class for our anchor tags. We're gonna basically add some text to our anchor tags. So underneath our original anchor tag rule, skip a couple of lines. And create a new rule for main-nav li a::before. Now what this does, is it creates a small piece of content that goes inside your anchor tag but before any of the other content inside the anchor tag. So if we wanted to see what this looks like we could point to the content property and just type HI or something like that. And when we do that we can see that each of our anchor tags now has Hi before the actual word in the link. And the cool thing about that is, we can we can apply any CSS properties we want to this new content separate from the CSS rules that we applied to the anchor tag itself. So instead of Hi here, we might put an open square bracket. And I don't wanna surround that with square brackets, we just want the open square bracket there. And we see that it appears over here to the left and then we could create a similar rule for main-nav li a:: after. So in the content property for the after pseudo class, we could put our closing square bracket there in a semicolon in that statement. And now we can see that our text is surrounded by those square brackets. Then we could create hover effects for each of these pseudo classes, so the way we would do that, is we would point to main-nav li a :hover::before. So now we can apply styles to this particular piece of content for, after we hover over the anchor tag that it's nested inside. So for example we could make this content invisible here by setting its opacity to 0. And then for our hover effect, we can set its opacity to 1. And let's do the same thing for after as well. So we'll set the opacity here to 0. And then let's just create a copy of this hover effect, skip a couple of lines and paste it. And we'll change the before here to after, and we'll set the opacity to 1 for that as well. So now we don't have any brackets until we hover over each of these items. That's a pretty cool effect. So now we can actually go in and apply some more styles to it. So right now I think the brackets are a little too close to the text. So we might put a little bit of margin before or after or to the left or right or whatever. And now by default this is gonna be inline content. So if we wanna change that we can make it block content or whatever. I'm gonna leave it alone, I'm gonna make it inline. But for the before element, I'm gonna give it a little bit of margin right. And we're gonna set that to maybe 4 pixels. And then for our after element, we're going to set margin left to 4 pixels. And that should space it out a little bit. And you'll see that that actually makes the contact us link here or the button itself not quite wide enough to include all of the content. So we can come in to our anchor tag rule and change the width of each of our buttons. Let's bring them up to 120 pixels each. That gives us plenty of room to work with. So we're a little bit closer to what we're going for here and might even bring those out a little bit more. So instead of 4 pixels, we might have 6 for those margins, for the before and after pseudo classes and it gets us a little bit closer. Also want to pull those up a little bit. Right now, it looks like they're sagging down below our text a little bit. So I wanna bring them up a couple of pixels and in order to do that we need to set the position property of our before and after pseudo elements to a value of relative and then we can set our top property here. And I'm gonna set it to, let's try a -2 pixels and see if that works. I'm gonna highlight that and then we'll copy it and paste it into the after pseudo element. And now that looks a lot better. So it's positioned a little bit more like I want it. And so now I want to create our animation. So again by default it's gonna be invisible. And when it animates on I want the brackets to fade in but also want to move them into place. So by default, initially they're gonna be hovering over the word products itself for example. And as they fade in, they're gonna move out into their final locations. So we're gonna animate the margins of these. And now right now we've started off our margin left and margin right to 6 pixels. But we're actually gonna bring those down to negative values. And let's try a -2 pixels on both of those and see where that puts it initially, and we hover over. Let's bring it in just a little bit further, maybe -4 pixels. And it might get us a good starting point. Yeah, so the brackets are now hovering over the first and last letters of our text. So when we hover over the text, we want those to fade in and animate outwards. So in the hover section here, when we change our opacity to 1, we're also gonna set our margin. Let's see this is our before, so we're gonna do our margin-right. We'll set that to 6 pixels here. And then down here for after, we're gonna set marginal-left to 6 pixels. Let's see if that gets us where we want it, very good. Now right now we can't really tell that it's moved but once we animate it, it's gonna look really nice. So let's go back into our man-nav li a::before. And let's create our transition property. And actually since this transition property is gonna be identical for both of them. We could create another rule here that covers both of them. So we could do main-nav li a::before, comma space and then .main-nav li a:: oops, don't put a space there, ::after. And then here we'll just set our transition property to a value of, let's do, all at 0.5 seconds. So each of these transitions, excuse me, will last half a second. Now we have a couple other items that are repeated in both of these. For example, the opacity, position and top properties. So we could add those up here as well, so opacity is 0. And then we'll just grab the position and top properties and copy those and paste them here, so that we're not repeating ourselves over and over again. Get rid of opacity and we'll get rid of top and our position properties. And that should still get us where we need to be but now we've applied this transition. So hopefully now when we hover over these, they will animate out and they do. It looks really nice. Now we could make that a little bit quicker. I think that does need to be quicker. So let's bring this to maybe point 0.25 seconds, so a quarter of a second each. Again it's just a nice little subtle animation that brings a lot of interest to your navigation unit. It's not something that you see often in websites but when you do see it, it looks really nice. And again it's all about subtlety here, you don't want something flashing in your face, you just want something nice and subtle. So that's how you can use the before and after pseudo classes to create animations on content that isn't even there to start with. And as we move forward, over the next couple of projects, we're gonna see some really creative ways that we can use these before and after projects to create some really nice hover animations for our buttons. So thank you for watching, and I'll see you in the next lesson.

Back to the top