Before and After pseudo elements explained - part one: how they work

often used often misunderstood than before and after's pseudo elements the before and after sewer elements are really good ways to add extra style to your website without adding extra markup that you don't really mean the problem is a lot of people don't understand really what's going on when we're using before and after and also the the power that they actually have this video is the part of a three-part series or enemy exploring sewer elements in this video we're exploring how they actually work in the next video we're gonna explore the contents property a bit more and just really what I can do in some of the really cool stuff you can do with it that you probably don't know about and in the third video we're gonna be taking a look at actually how to use it to spice up your designs and to make some really cool looking stuff so here we have a super basic example where I have a paragraph just sitting in the middle of our page now I can select this paragraph pseudo-element and there's two of them there's the before and the after sewer element so we have two of them that we'll look at I can do the before element by writing it out like that so it's P double colon and the word before as a side note you might see some tutorials online or some mentions of it with one colon like that technically that's wrong the original specification for it was written with just one when we got the level three specification for it it's when they they made it with the double colon and it's to represent a pseudo element whereas the single one would be something like your a:hover so that's a pseudo class so is when they did the whole css3 thing level three specification for a lot of these things they changed it from pursuit they changed it to distinguish pseudo elements from pseudo classes so technically this is the right way to do it but browsers still support it with one just because they don't want to break all of the old stuff and how it used to be done so they support both of them so to actually use a pseudo element I can do a whole bunch of stuff in here and nothing's gonna happen so just to show you if I do like background red display:block position:absolute top:0 bottom zero left:0 right:0 I do all this stuff and nothing is actually happening I can't see anything and it's because there's no it doesn't exist yet my pseudo element is not there so what I need to do to actually get a pseudo element to work is add content and just do that for now I just put two little quotation marks single or double and all of a sudden it works so its position:absolute to the page top bottom it's just covering everything I'm gonna take just display:block we'll leave it like that for now and I'm just gonna do with I don't know ten pixels and we'll give it a height of ten pixels and we should see a little red thing up here there we go so content tells it that well there should be some content if we don't add this it defaults to none and no matter what you try you can't use it as I mentioned earlier on I'm gonna have a whole video talking about what the content property is for now we just need to know we need to include it there now to understand what's really going on we're gonna jump into our dev tools because a lot of people this is what a lot of people don't really actually understand so here in my dev tools I have my paragraph and I'm going to open up this paragraph and we're gonna see that there's a before inside of it so let's just make that a bit bigger I'm gonna zoom in so we can see that here's the content itself and here's my little before thing that I just created now the misconception that a lot of people have is they think that when we're using P before it's something that's being inserted before the paragraph itself but that's not true it's getting inserted before the content of that paragraph or if you're it's on a div it to be the content of that div so it's the same story with after so if I take the exact same code I already have here so there we go if I take all of this and I copy it and then I paste it and add an after here and we'll see that pop in in one second and so before my content of my paragraph and the last one is after the content of my paragraph so it's all included inside the paragraph itself and that's the main misconception people have a lot of the a lot of the time especially at the beginning people think it's coming before the paragraph and after the paragraph and that isn't what's happening it's important to understand that especially when you start styling stuff with it because a lot of the time you're gonna be using some position:absolute on these and knowing how that works is really important so I'm just gonna close this off and I'm actually gonna add in my HTML here I'm gonna add an image it won't be going anywhere I'll just do well alright would just be a placeholder on splash it 500 by 500 and the reason I'm doing this is it's really important to know that sometimes it would be really useful to add a pseudo element to an image you can't do it so just to show you here if I do so I'm gonna do my image for let's say content is nothing once again just a blank content display block with 100 pixels height 100 pixels and background of purple nothing shows up on the screen and if I do an inspect on that we're gonna see that on my image there's nothing there's no before or after or anything like that and this is because there is no content or perhaps a better way to think about it is that the image is the content images are something called replaced elements which are weird and really confusing and I'm not gonna get into that now except just to say that they don't really fit into the typical content model of CSS the images source is the content so they behave differently so and I'm talking about this because one time I went on for a long time trying to figure out why am i before wasn't working on an image and I couldn't figure what the hell I was doing wrong I don't want that to happen to you so don't try putting suit elements on images it will not work but with that out of the way let's I'm gonna change my content here on my before let's just take this after off we don't need it right now I'm gonna just think my width and headed out for this so I have nothing much but I'm gonna add in here I'm gonna write hello and you can see hello shows up and actually let's take off the display block as well there we go hello you can see that the hello is showing up and it has a red background on it and it's there and that's cool I can write stuff before so again it's showing up before this and I can style this however I want I can give this its own font size font size of say 8 10 pixels font weight of 800 maybe tens a little small logo 20 and there you go just yeah you can style this completely separately from the other stuff so that's kind of interesting now you probably won't be necessarily writing things like hello but we're gonna see more useful options of this and of course if I take this exact same thing just like I did before and I switch it to after we'll get the same thing over there maybe this could say goodbye so you can see where the elements are fitting in there and one thing you may have noticed is that these pseudo elements are in line by default they're lining up with the content itself but of course I can change that display block and now they're block level and they'll each take up there oops that's on this one copy paste and now they're both block level elements you can already see a little bit of how I could use this maybe as a design element instead of putting in text and the cool thing with before and after is it lets us add some really neat things without needing the extra markup that no you know you might need for this especially for design elements where you don't really want to be inserting gives just you know I have an empty div just for a design element I don't have to do that I can use my before and after to do that yeah them the content property is something that you can do some really cool extra stuff that I don't see a lot out there so I'm assuming people don't even know that it's available so we're gonna check that in the next video and as I mentioned we're also going to take a more global look at awesome ways we can actually use this but before we can really do that this video I think was instrumental because you need to understand what's actually going on before you can do that and there you have it I hope you have a better understanding of what the before and after pseudo elements actually are and how they work if you have any questions or anything I didn't clear up make sure to leave a comment down below and let me know if you did like the video please hit the thumbs up of course a big thank you to my patrons who helped make this possible if you'd like to know how you can support this channel just go and look at the description down below you'll find a link to the patreon page and of course until next time don't forget to make your quantum internet just a little bit more awesome

Channel: Kevin Powell

Views: 905,678

Keywords: Kevin Powell, tutorial, html, css, before pseudo element, after pseudo element, before and after pseudo element, before and after pseudo elements, ::before, ::after, ::before and ::after, how pseudo elements work, how ::before and ::after work, how before and after css work, before and after css

Id: zGiirUiWslI

Length: 9min 7sec (547 seconds)

Published: Wed Feb 14 2018