Before and After Pseudo Elements Easily Explained [CSS]

[Music] in this video we're going to take the mystery out of pseudo elements specifically before and after pseudo elements so what are pseudo elements and how do they work well it's easier if I just show you so I have an index.html file here and all I have in the body is a paragraph and I'm linking to the style sheet that we're using here in the style sheet I'm importing the Google font Roboto and I'm doing the normal resets here box-sizing quarter box margin and padding of zero in the body we're setting the font family setting the height we're displaying as flex and centering the justified content and aligned items this is just for the purposes of the video to demo so that the content is in the middle we have the background set to a dark gray and the color of the text to white and then in the paragraph I'm just increasing the font size a little bit for the demo and set a margin around the edges so to add a pseudo element first we'll select the element that we want to add a pseudo element to so in this case we're going to use paragraph and then double colon and then before so it's important also to understand why there's two colons instead of one so a single colon applies to a pseudo class such as a hover my double colon applies to a pseudo element such as a before or an after so before css3 a single colon was used for both now after css3 was released the correct way is a single colon for pseudo classes and double colons for pseudo elements single colon will still work because of backwards compatibility and browsers but in the future that may be removed so it's important to write these correctly so on a pseudo element the first thing that we'll always want to add is our content and content accepts a string so we could type before and I'll save this to see what it looks like so you see here that it adds the content before the paragraph all right so let's look at the chrome tools so here in the dev tools we have our paragraph and then within the paragraph we have our before and our content so the before is not coming before the paragraph element it's coming before the elements content and so we could do the same thing here and we could change this to after and now you see that we have our before and then our content and then our after so we're creating elements within an element now notice something here I can't select the text from these pseudo elements this is important and I'll bring this up again in a minute it's on a pseudo element we can use any normal CSS properties so we could set a width and a height and let's set a background color and I'll save that so with a pseudo element it's very important that we have the content defined I'll go ahead and remove the content and let me save this and now you'll see that the entire element has disappeared even though we have the width height and background set the pseudo element is still gone and if I look at the dev tools again you'll see that it's not there it doesn't show up at all so if we don't have the content defined it doesn't exist all right so if we uncomment this and we at least put content blank like this and then we'll need to display this as inline block and now we'll have before we'll have our square that we defined here and we have it again here and we can see it in our dev tools as well we can also do some cool styling like we could change this to block and then we could set the width to 100% we'll set the height to 5 and now we've got a line across the top and of course we could do the same thing to the after so now you can see how we can do some cool things with before and after alright so a side note so in our resets we have box-sizing set to border box but this actually does not apply to pseudo elements so to do that we actually have to add the pseudo elements into our resets here so we can do star before and star after and that will work just fine and so now I want to show you some other things that we can do with content so instead of specifying a string we could actually specify a URL so we can actually use an image we could do something like this and I'm going to take the width and the height and the background away and there we can have an image before we could do the same thing after another example so if we have a bunch of block quotes on our website we could style them and use a before and after to put the quotation marks so in the content we could use open quote just like that and I'm gonna remove the display block and then in the after you do the same thing except we'll use a closed quote I'll remove the rest of that you can see there that it automatically adds our quotation marks and we could style these as well we could change the size and we could make them stand out by changing the color I'll put that on the after as well and we could take some time and style these better but I just wanted to show you this option another good example would be links so I'm gonna add some more lorem here and then let's add some links in here so the first one will just make it go to a non-existent file but it's going to be a PDF all right and then we'll add another one here and this is going to go to an external link but it's actually not going to go anywhere but this will represent an external link all right that looks really terrible all right so let's style these first thing I'm going to look at is the link itself and let's change the color because I can barely even see that and let's set the text decoration to none all right that's better and then what we can do is on a lot of websites you'll see a link and then after the link you'll see an icon so for a PDF image or an icon that specifies that this is an external link and so to do this we're gonna use font awesome so you do have to sign up for a free font awesome account and once you sign up you'll get a link to a personalized kit all right so I've already signed up I'll go to my kit and all you have to do is copy this code here and then in the index.html file just before the closing body tag we're gonna insert that script all right so let's search for the icon that we're looking for so the first one was a PDF so what we can do in the content is we can use Unicode characters and so for this icon this is the Unicode character so we'll copy that so now I want to style the anchor after but I don't want this to be on every single link so we're going to specify which links we want to add this to so we could have multiple links across our website that are PDFs so what we're going to specify here is that the H ref we want to look at the ending of the href so we're going to say dollar sign that looks at the end I'm gonna say anything that ends in dot PDF on this we want to set our content to the Unicode character now we have to escape it so it backslash alright and that's not all that we have to do in order to use font awesome we also have to set the font family and so this is going to be font awesome and you have to specify the version the current version is 5 and then you also have to specify the kit so is it a free kit a pro kit etc so we'll type in pro you may have to type in free and then we also have to set the font weight and so for these it's nine hundred so now I can hit save and there we have our icon and I think it's just slightly too big so I'm also going to set the font size to 0.9 p.m. and that looks a little bit better alright and so we can do the same thing for our next link here which is an external link so let's go back to our font awesome and let's search for an external link external alright so we'll pick this one and here's the Unicode character I'll copy that and then I'm going to duplicate this alt shift down and I'll paste that unicode character in there but this time instead of looking at the end of the href for a PDF I want to look at the beginning so the beginning is the caret character and we're going to look at the beginning of the href for HTTP I'm not going to go any further than that HTTP as long as that's the beginning it will target anything that is HTTP HTTPS etc so these are will all be external links all right I'll save that and now we have our PDF and our external links so now is probably a good time to talk about when not to use sudo elements so you should never use a pseudo element for important copy or text because remember at the beginning I showed you that soon element content is not selectable also pseudo elements may not be accessible on some screen readers and then on screen readers that do support pseudo elements it's going to read out loud the content so when we're creating pseudo elements a lot of times we're just thinking about the UI or the user interface what they see well we also have to think about the UX or the user experience so only use pseudo elements where they make sense all right next I'm going to show you how we can use pseudo elements to make a hover effect on a button that looks really cool so I have a very simple HTML file here all we have is an anchor with a roll of button and the text of hover on our Styles I'm importing at google fonts we have our reset to set our box sizing to border box and then simple CSS and our body we're setting the height we're displaying as flex and centering so that it's here in the center for the demo background font and font size all right so let's first look at our anchor so we're going to set the position to relative and set the overflow to hidden we're going to set the color to the same background color I know this looks counterintuitive but you'll see in a minute we have a font weight of 700 we're gonna transform the text to uppercase set the text decoration to none we'll have padding of one rim top and bottom to rim left and right all right so let's save that and see obviously we're not going to see anything because now the text is the same as the background so let's get to that next all right so we're going to look at the anchor before and we're going to set our content to blank we're going to set the position on this to absolute so we have the anchor set to relative so that we can absolutely position our pseudo elements all right we're going to go from the top three pixels down from the bottom three pixels up from the left three pixels in and from the right three pixels in we're going to set a background on this to white and we want a border the same dark gray color solid four pixels and we want a z-index of negative one the z-index of negative one is so that it goes behind texts and so now we can see our text alright so now we're going to move on to the after we're going to create an after pseudo element with a content of blank position of absolute again this time top bottom left and right will be 0 we'll set a background on this to an orange okay and then we're also going to want a z-index on this one and we'll set it to a negative 2 all right now we have our outline and that's what we want to end up with when we hover but in order to do something cool with this we're going to include a transform and we're going to rotate this negative 90 degrees let's see what that does alright it moves it so well actually what I'm gonna do for now I'm gonna change the overflow:hidden I'm gonna comment that out so that we can see the entire element all right so I rotated that negative 90 degrees I also want to translate it so the first value is the x value and I want that to be a negative 50% so it's going to move to the left 50% and the second value is the Y value so I want that to be a negative 100% all right so that moved it over and down but what I want to do is I want to change the way that that works so I'm going to use a transform origin and I want to say top left alright so what that does is it takes the top left which is now down here and it uses that as the point of origin for the translation and the rotation all right and then we're also going to put a transition and we'll set that to transform and 300 milliseconds so now in order to make this do something when we hover we need to select our anchor and select the hover and then we're going to target the after so this is important here because with the hover needs to go after the anchor so we're hovering on an anchor but we're targeting the after pseudo-element if hover came after the after it would not work alright so when we hover the anchor we want the after pseudo-element to change its transform so we're going to transform and we're going to set rotate to zero and translate to zero zero so that's going to reset it to its normal position all right I'll save that now as we hover you see that it goes into position that's fun okay so let's go back up here and let's uncomment the hidden so now anything outside of the anchor the overflow is hidden and now as we hover all we see is the outline pretty cool now there are a lot of different ways of doing this this is just one way there are some pretty cool things that you can do with this so let me comment out the overflow again and what we could do for now I'll just set this to zero degrees and we're going to comment out the origin here we'll say a negative 75 and then set this tough 50 yeah that looks pretty good so you could play around with these numbers and do different things with it and so I like it down here and then as we hover it goes into place so let's let's uncomment this again change the overflow to hidden and so now it'll start out like this and then as you hover over it it grows into place so play around with the numbers you can do a lot of different things with it okay so the last thing that I'm going to show you is a hover effect on an image so I have another basic index.html here we have a div with a class of container within the container we have two cards within the card we have an image with the class of card image and then we have another div with the class of car text within that we have our title and our body and then a second card exactly the same in our styles we're importing a font we have our normal resets we have some basic CSS here styling the body we're using flex again and if you're not familiar with Flex box I have a video on that alright and then on our h3 we're transforming that to uppercase and then on our container we're setting the height to a hundred percent so that we can flex this into a column and center it eventually that's going to look better all right so let's continue on with this CSS here next we're going to look at our card and on the card we're going to set the position to relative and we'll set a margin of 1 a.m. and then we're going to look at our card before and after so on both the before and after we're going to set a blank content we'll set the position here to absolute opacity to 1 we're going to transition the transform with an ease out of 250 milliseconds alright so we'll define that transform here in a minute on the card before we want to set the top left and right to 1 a.m. and the border top to 3 pixels solid white and then we'll have a transform on here scale so the first value that it accepts is the X so we want the horizontal to be 0 and the vertical the y to be 1 so basically right here we're only scaling the horizontal value so then we want to set the transform origin to left so we want it to start and end the left all right so now we'll go to the after and we're gonna do something very similar we'll have a bottom left and right of 1 a.m. and the board of bottom 2 the 3 pixels of solid white same thing on the scale and this time on the transform origin we want it to be on the right all right so let's save that and we don't have anything so far because we need to set our hover so let's keep going alright so now we'll set our hover so we're looking at our card hover and then before and our card hover after so again we want to make sure that the hover goes on to the element that we're hovering on and then we're going to style what comes after that the before element and the after pseudo-element all right so on these when we hover we want to transform that scale to the original which is 1 1 all right so let's save that it's looking a little odd because we still have to style a bit here with the text so let's keep going with the CSS so on the image we want to set the width to 100% we're going to display it as block and we're going to set a transition on the opacity ease out 250 milliseconds and then when we hover over the card we want the image opacity to go down so that we can see the text more easily so let's save that and we'll see that so the image darkens it's still a bit off there let's go let's keep going with the CSS alright so we'll look at the card text now we're going to set the position on that to absolute padding of 0 top and bottom 1 a.m. left and right color to white opacity initially to 0 and we'll set a transition on the opacity ease out 250 milliseconds and we're going to set the top to 0 and we're going to display this as flex and with the flex direction of column we're going to justify the content center and a line item center and a height of 100% all right so we'll save that now that's looking a lot better already so as we hover now we have our lines our before-and-after pseudo elements are showing up properly so let's keep going now we'll look at our card hover card text so when we hover over the card we want the card text opacity to go up to one I'll save that there we go that looks pretty good and we also want to look at the cart title I want to set the font size on that to two REM that looks a lot better card titles a lot bigger so that's looking pretty good now I want to show you a different way that we could do this so here we're using top zero flex column justify content align items height 100% we're using these lines here to arrange the card text and this is this is fine but there's another way that we can do it it set the width to 100% set a text transform translate a left of 50% and a top of 50% so let me comment this out and I'll save it and we get the exact same thing with this so what this is doing is its positioning top to 50% which is halfway and then left 50% again halfway and then we're transforming and translating which is basically just moving it the first value is your x value so it's going to move it back to the left 50% and then the next value is the Y so it's going to move it up 50% it's very hard to wrap your head around this but basically it's moving it and then moving it back which is centering it and that's the hardest thing to explain but it works alright so that's going to be it for this video if you stuck around to the end thanks for watching if you have any questions let me know in the comments below so before you go if you like this video a thumbs up is appreciated I upload new content every week so hit subscribe in the belt to get notified and if you think this video or any of the videos on my channel might be helpful to someone else please share them i'm also on twitter and instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 21,803

Keywords: 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, css before, css after, css before after, tutorial, html, css, css pseudo elements

Id: -bwR9S5MmOI

Length: 23min 50sec (1430 seconds)

Published: Fri Sep 20 2019

Reddit Comments

[u/codeSTACKr]

Here is my latest video. In this one I'll explain the CSS pseudo elements ::before and ::after. I hope this helps at least 1 person. I appreciate any and all support. Don't forget to SUBSCRIBE! Thanks!!

[u/brianoftarp]

I recently started using pseudo elements. This was very helpful. Thank you.