 Hi everybody, my name is Kevin and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips tricks and tutorials in this video. I'm very excited about it. We're going to be seeing how we can unlock pseudo elements positioning within an entire parent instead of having it relative to the element itself. You can already sort of do this, but it becomes a bit hard to move things around. But if you have a grid setup and you're positioning things on the grid template, it just makes it so much easier. So we're going to be seeing exactly how to do that in this video. It's a lot of fun. It's one of these more creative things you can do with pseudo elements. There's lots of good stuff. Let's jump into it. Alright, so the very first thing that we want to do is come on to my content here and actually give ourselves a grid. So we'll just come here and do a display grid on content. So the content is the white box that we see here. So by doing that, nothing really changes right off the bat. Because well, we have a grid, but nothing is going on. Now I am using Firefox to do this. So what we can do is bring this up and you can see here that I have my grid that I can put on. So I'm just going to leave that on so we can see it while I'm working. And I think I'm going to change the color of it, even though that sometimes bugs out, but something we can see a little bit easier. So with that blue right there, I think that's going to make it just a little bit easier overall when we're working. We can see we have a grid right there. So I'm also going to give this a grid template columns. Let's do repeat. And let's try six columns with one. Yeah, one if our each so we just end up with six columns going all the way across can't really see them yet. But once we place our stuff on there to work a bit better. So here on my title, we can give this a grid column of one over negative one and not negative two negative one. So that should make it stretch the whole way across like that. And then that's just a paragraph now. Normally I'd want that on a class but just because this is a simple demo site, we can do the exact same thing right here. Just so we're on our grid, but we've split that all up now normally I probably wouldn't be doing something like this. But because I want to play with where my suit elements and all of that are that's what this grid is really going to be here for this isn't a grid that I would normally have coming in like this just because it's a little bit of overkill just for a title element. But if I really needed to play with my items here, it could be something that makes sense for me to come in and create a more complicated grid than I really need from, you know, from the original standpoint just because it makes it a little bit easier for me to play around with. So let's come on my title here and we're going to create a suit element so title and we'll do a before and actually we're going to play with both before and after so I might as well set these both up at the beginning because there's whenever using suit elements there's a few things you need to have one of them is content content. If you don't know a lot about suit elements I have a three part mini series two part I don't remember I have a mini series that dives in deep dives into them really. But one thing it's really important is you need content because without that your suit element will never exist. So we have my content there and then let's leave this a position absolute and I'm actually going to leave it just like this for a second and we're going to explore the different things that we can do with this position absolute. So let's give it a background first so we'll be able to see it I'll give it a background of current color just like that we won't be able to see it yet. Current color is going to take the color of the font that is being used in that area so it's not something you see terribly often doesn't have the most use cases especially now that we have CSS variables but suit elements if you want it to the background to match the color of your element it's a really nice use case for it. So current color on there and now let's actually get it to work so I'm going to do a top of zero bottom of zero right of zero left of zero and hit save and it should take over my whole screen just like that there we go. So right now this position absolute it's relative to my body or my viewport because I've never declared any other position anywhere in my document. If I come up here to my content actually what usually when I'm doing pseudo elements I'm doing a position absolute on the pseudo element and then I'm going on to the element itself and I'm doing a position of relative on there. So if I do that you can see it's actually covering exactly the area that my title was in in this case though I don't want to do that. In this case I want my position relative to be up here and position relative here and that's going to cover the entire white box is this top zero left zero all of that it's not looking at the padding it's not looking at anything else it's just going all the way across that content area. Where this gets interesting though when you have the parent so my content here being a grid container is that when it's a grid container we can actually position things absolutely on the grid itself. So let's take a look at that that's on these two actually let's pull all of this off because I don't want them the same for everything. Let's just do my title before the moment. And we'll save it should look the same but now what I'm going to do is say grid column. And let's do just for fun a four over five. And now you can see it's fitting on my grid column of four over five isn't that really cool that's really exciting to me so it's on the grid column of four over five. But do you notice something else it's not fitting completely within the grid because I've only declared a grid column the top and the bottom are still relative to the element itself. So I find that fascinating I find that really interesting and I think you probably do some fun stuff with that. But for the moment what I want to do is I want to position that guy down here in this empty space. So in that I want to start at four but I want to go all the way to the end so with the end can be a negative one. I'm going to go all the way across. Now to really fit this in properly I'm going to make a much more complicated grid that I mentioned before we're making grids that maybe you wouldn't need them to be this complicated from the beginning or in a normal circumstance. But I want to come in here with grid template rows and this time we're going to do a repeat of four so I want four columns but I'm going to do a min content here instead of one FR and my grid disappeared. Of course it's not working did I forget. I might go in now. Oh it is working but you can see it's all getting smushed down there at the end. So to actually get this to work again this is we're getting a little more complicated than maybe normally would my title. I want this to be the grid row of one over three or four that right there we go. So it's going from one to four so it's actually taking up three lines on there so it's taking up three of the four. So I created four columns and this is taking up three of them and a handy and the reason I use min content instead of one FR is one FR is going to make all of these have to be an equal size. So the equal size that well it's not quite that you can see that they're they're much bigger when I do this because they're trying to distribute the empty space they have available. To them whereas min content is going to make sure that things are as small as they possibly can. So in this case there is small as they possibly can this is this has more space on it because there's a margin top and bottom on it. So that's why we have a little bit of extra coming up on those. So with all of that work done I can now come on to this title before and instead of doing I want to keep that but now I can also do a grid row of three over four. And look at that I get this nice little decorative element that squeezes in nicely right there so I think that looks pretty cool just leaving it something like that could be fun. Now you would have to be careful with responsiveness obviously it's not perfect and if I shrink down I think I would get some issues as well you can see there's it's not perfect. So it's not this isn't necessarily an ideal situation but it is one of those ones where you can start getting creative with how you're positioning stuff and maybe something that would be a bit more realistic will be this other one that we're going to set up so that would be my after. So title after once again we already have the content and a position of absolute on here. So that means I can just come in and we'll give us give it a background first background let's go teal it's sort of contrast you with my orange that I have here. And so we have my teal then what else do we need to have on here we want to do a left. Let's start with left of zero right of zero I'm going to play and we'll do top of zero bottom of zero once again and it's going to cover everything. But this time we're going to place it on my grid let's turn that grid back on. And so we can do matters we'll keep it consistent we'll keep it here at the bottom grid column. Actually I'm not going to do a grid column am I no I'm not I'm just going to do a good row so grid row is going to be one over negative one. Because I want it to take up the entire height but I want it I don't want it to include the padding that we had in there I just want it to be the height of the content that's inside. And then instead of having the left to the right what I could do here is I'm going to take my right off actually. And let's just give it a width of like point five m. So it gets much smaller and then my left we could do a negative point five m so it should pull it wrong way I wanted that to be a positive. There we go. I'm going to have it pulled in a little bit and you get this nice type of you know bar thing they could drag all the way down like that. Or this is where if you need to change how it is maybe you don't want it to be going all the way down maybe this could stop at line number four. And you can get a nice little bar like that exact height of the title. Now something like this you could probably pull off without or I know you could pull off because I do decorative elements like this a lot of the time you wouldn't really need grid to be able to do something like that. But you know if then if you wanted to get a little bit more you know something like that that's not the whole height or again where we're going all the way to the bottom with something this could be a little bit harder to achieve. You could definitely do it with the top and the bottom using a calc and bringing in the size of the padding but I do find it really interesting or why don't we push this just a little bit more and maybe going like I don't really like all of these use cases. So just for fun let's move this teal box down over here and do something that maybe you'd like you could see yourself using because as we saw this one on this side can cause a little bit of issue. So what I'm going to do is let's move that down so grid row we're actually going to do a four over five and then we're going to and we're going to put this year back to a left of zero and a right of zero. And then we can also do a grid column of we're going to go with a one over three like that. And here in my paragraph we could actually start this at my line three and now you're going off there a little bit too stuck together it like a little bit more space there when we come all the way back up to where I define my grid and as well keep this with all my grid stuff. We could do a grid or we don't need to say grid anymore we need to say gap so I just want to call them gap. So a column gap of say one am or point five am or something like that gives us that little space in between. And while this one could cause us a little bit of issues I do think I put this into responsive mode we should be able to get a better idea. Yeah that top one as you can see it's causing a little bit more it's not perfect. But here on that bottom one it's really going to adjust really well with how everything set up there. It's going to grow and shrink and this content can sort of adjust automatically. So I do think that that works maybe a little bit better than that other one and you can see here I have some fun old CSS overflowing you make your CSS is awesome jokes right now. So for stuff like that or even you know maybe you want your grid gap maybe you want a gap of one am all the way around. And my paragraphs come down margin zero. There we go and it's starting to fall in line a little bit better. So just a few fun things that you can do here I'm not saying you would probably want to do this all the time I do think that there's times when you probably wouldn't want to push things or go this far with it there's much easier use cases. But this is one of those really fun things with CSS where if you are using a grid or you really need precise positioning of something maybe it's a good idea to use a grid to get that pseudo element to go exactly where you want it to go. So I really hope you like this I hope you learned something fun here I hope you can think of really fun and creative ways to use this and if you did please let me know in the comments down below or if you have already used this I would love to know about it. Thank you very much for watching I really appreciate it if you haven't yet subscribed and you enjoyed this video please do consider subscribing. Thank you to my patrons you guys are amazing thank you very much for your support every single month and of course until next time don't forget to make your corner the Internet just a little bit more awesome.