PRACTICAL Pseudo Elements in Oxygen (::before & ::after)

what's up everybody welcome back to the channel today we're going to talk about pseudo elements that's before and after elements because they're extremely powerful there's a lot of really practical use cases for them but a lot of people don't even know they exist or don't even know how to get started with them or can't even get them to show up when they start trying to work with them and even the people that know they exist and and like know how to use them they're not using them enough i don't think so i just want to do a an official video on before and after pseudo-elements so that you feel confident enough to start using them appropriately throughout your project so we're going to do a little crash course on what pseudo-elements are how they work and then i'm going to show you a really practical real world way to use them based on something that i did for a client and that i do a lot of times for clients it's something that's very very common so it's going to be very valuable training for you now before we get there a lot of people i've been i've been getting blown up man on social media email every channel people can find me on they want to know when automatic.css is going to be available and i can tell you right now it is very very close it's right around the corner the plugin is working the dashboard is working the licensing is working uh version 1.0 of the framework is solidified the fallbacks are in place the fallbacks are working everything is pretty much ready to go we're just making the dashboard of the plugin look a little bit nicer and then it's going to be go time there is going to be a limited time lifetime deal for automatic.css limited like very limited i don't like ltds they're not sustainable so it's going to be a very limited time ltd i know y'all like your ltds so what i would advise you to do is go to automatic automaticcss.com i'll put a link below get on the waiting list there's an official waiting list for automatic.css uh if you have any interest in the system if you have any interest in the ltd you're going to be you're going to want to be on the waiting list so that's all i'm going to say about that go get on it if you miss it you miss it and that's that okay all right let's dive into our pseudo elements training all right so i'm going to start by adding a section and let's talk for a second here's the practical use case and i i feel like this is a a really good kind of real world thing to kind of model our training off of it's a pricing page that i built for doc ready and if you look closely you're gonna see that a lot of these things are pseudo elements so this price right here the the dollar sign is actually a pseudo element that does not exist inside the oxygen builder the per month tag and the each appointment tag are assigned to classes those are not real elements in the oxygen builder those are pseudo elements this best value tag that is a pseudo element and the check marks on the features items those are pseudo elements and you can actually switch the classes so that if you want to check it'll be a check if you want an x it'll be an x you don't have to worry about actual check marks and x's and dollar signs and labels inside of the oxygen builder not necessary and not practical and not efficient which is why you need to follow this training and know how to do this stuff all right so i'm going to go to the builder i added a section just for the purposes of showing you like what a pseudo element is and how it works i'm just going to add a text element we're going to make this say 79 it's going to look like a price i'm going to go to typography i'm going to make it really big 12 rim i'm going to use a center all class from automatic to get this thing centered in the middle here and then we're just going to save and look at the front end so this is what we have so far and i'm going to be pulling up the html so you guys can see that so we have our little div and it is a 79 cool pseudo elements if you and oh really cool for those of you who are afraid of writing css don't like writing css don't know how to write css the great things about pseudoelements are you can do them all inside the oxygen builder and that's what i'm going to do for this tutorial so i want to make it a caveat that you can write the css if you want i write the css for pseudo elements because it's easier it's faster it's easier to keep organized but if you need to use the builder to do it you can use the builder to do it you do not have to know how to write css that's all i'm going to say about that okay so the way you do it inside the builder is you click this little state button and then you choose one of the pseudo elements there's two of them there's a before and there's an after we're gonna use both so you can see how this works so i'm going to do before and the most important thing that you need to know about pseudo elements is that they don't exist until you make them exist so by selecting the before obviously i haven't done anything so you're not gonna see anything but you can start doing a whole bunch of stuff like you can change its width you can change its height you can change its color you're not gonna see it unless two things happen number one you put something in the content box okay so if i put a dollar sign i will see it right off the bat but what if i don't want actual written content what if i want a shape what if i want an image what if i want something else you will not see it until you set a display property so what i would recommend is whenever you're creating a pseudo element the minute you click before you go right to layout you go right to this display area and choose a display flex is probably the easiest one so just click on the flex button that way when you start doing stuff like if i went to size and spacing and said 2 pixels height 100 pixels and then i set a color on that like a back any background color i actually see the pseudo element all right let me go to the front end there it is i can see it right um but if i did not have that display property let's go to the before let's go to layout let's turn off the display flex the entire element disappears you will not know regardless of how much height how much width it doesn't matter if there's no display proper property you're not going to see it so and a lot of people forget that and they're like where is it i can't even get it to show up so go immediately to the display property and set a display and like i said flex is easy you can do inline flex you can do block inline block uh sometimes works depending on what it is inline sometimes works depending on what it is and then obviously you have display none which could be valuable if you wanted to make your pseudo element go away at a certain break point right or on hover or something like that okay but i'm just going to set this to flex and i'm also going to go to backgrounds take that out and go to size take that out take that out because we're not going to be working with shapes today we're going to be working with and there's just a ton of stuff you can do with pseudo elements so i'm only gonna cover like a practical use case to get your feet wet and then it's up to you from there and i'll show you other stuff in other tutorials but this will get you started all right so i want a dollar sign there it is cool now because i set this to flex we're getting some weird alignment now the pseudo element is attached to this element right here your main element so if you set a display property on your main element you can affect how the pseudo element behaves or where it's positioned so for example i can go choose my text block text block which is not choosing the before not choosing the after i'm just choosing the 79 and i can set that to flex and look what happens when i set that to flex which the default is row it puts them in line with each other that's kind of what i want if we are going for something like this the question now is how do i get it smaller and how do i get it up there well it is a real even though it's called a pseudo element you can do pretty much anything to it that you can do to a real element so for example i have my before selected i can go to my typography tab set a font size of 40 of and that's relative to the element it's attached to 40 of that font size which the dollar sign is you know around that maybe we'll go with half so 50 and there it is now one thing with spacing and i'll show you this with the after so there is a second pseudo element that you have access to it is the after i'm going to choose that and i'm going to make it say like per month or something like that so i'm going to do per month awesome you can even put the little dash in there and now you have a situation where if i make that smaller so i'm going to go to my typography and do the exact same thing except we're going to go with like 30 percent um it's way up there um and it's like okay how do i get it down there and then you're going to see a problem when we get it down there the easiest way to get something from the top to the bottom of a container is auto margin there's a bunch of ways to accomplish this stuff but for this for this purpose auto margin is probably your easiest bet so if i go to size and spacing margin top auto if you put auto margin on the top it forces it away from the top if i put it on the bottom and force it away from the bottom if i put it on the right it forces away from the right so auto margin forces the thing away from the side that's auto all right so i want it away from the top i put auto on the top and it goes to the bottom but you can see it's completely misaligned and this is another um area where people get really really tripped up so first let's look at how this is structured in the html here's my div i want you to notice here's your before element here's your after it's not before the div and after the div it's before what's inside the div that's 79 and what's after the 79 that's where the pseudo elements are attaching the div is actually if we look at this see that outline i'm like pointing with my finger like y'all can see my finger in the screen it's it's obviously the div is much bigger than the 79 and the reason is there is hidden spacing in this element and it's hidden spacing that a lot of people forget about and that hidden spacing is caused by line height so remember we put a 79 in here and on typography we said make that thing gigantic 120 pixels 12 rim so obviously line height is attached to that by default we need to take the line height away and there goes our ghost spacing that was causing all these problems all right so i'm going to hit save go back to the front end now you see we have pretty solid alignment the other thing i want you to see is that remember what i said you can do pretty much anything to a pseudo-element that you can do to a regular element so if i wanted to make this background color and we'll use a variable from automatic.css let's choose uh shade medium okay oh that's background color we don't want that let's go to typography we're going to do that on color um and let's do shade light there you go um cool and then let's go to our before and let's do the exact same thing so we'll go to typography var shade light so now i have styled my pseudo elements differently from my main element which is really important to understand that these behave completely independent even though they're based on that thing and attached to that thing um so if you want the main element to be one color or have a background color but you want your pseudo elements to look completely different it's totally totally possible alright so that is kind of like the just crash course in pseudo elements like we got them to appear we can see that we can style them let me show you one other thing uh before we get to our real world tutorial you can absolutely position these pseudo elements and the reason i am and when i say absolutely position them i'm talking about in actual css absolute positioning uh the reason i'm covering this is because it's another thing that trips a lot of people up and i'll show you what happens so they go to the before and they're like you know what i want to put that kind of in a funky place related to my 79 so what they do is they go to layout and they go to absolute and then when you put in a position a top and a left which you're supposed to do like 0 0 it fires it all the way over to the edge of the container and if i did that on my after and i did absolute and now i said zero from the top zero on the right which feels like it should be zero around the 79 it it almost feels unrelated to the 79 it's actually related to the section that the 79 is in it's like why is it related to the section because absolutely positioned elements attach themselves to a relative parent and if the parent is not relative it looks for the next relative parent all right so if we want to contain those pseudo elements to our thing with absolute positioning our main element our 79 needs to be the relative parent so we go to layout set it to relative and suddenly you can see our pseudo elements are attached to our 79 instead of attaching themselves to the section that trips a lot of people up so now what i could do with my top and my left if i did percentages i could do like minus 20 and i could do percent over here minus 20. it's kind of there let's do minus minus 30 and i can do minus 30 here and now you can see i've properly positioned using absolute positioning my dollar sign but my per month is acting up because that's still set to zero zero but i just wanted to show you if you want to absolutely position these things you can but if you don't make the main thing relative then the main thing is not going to be the thing that those pseudo-elements are attached to if that makes any sense okay i think it does alright so let's clear this out and let's tackle uh something practical let's create one of these cards so i'm going to create another section and we're going to do bg shade light okay let's do shade ultra light on this so we'll do bg shade ultra light these are automatic css classes by the way i'm gonna add a div we're gonna do grid three on this we're gonna do grid m one on that and we're gonna do div div div this isn't a tutorial on automatic so i'm just gonna move quickly we're gonna do gap m and we're ready to go with our cards i'm also gonna do pad section and we'll do xl make this a really big section we'll put heading in here drag it don't do that never do that let's try that again yeah oxygen with these like dragon you know drag my padding nonsense always trips me up when i'm moving fast okay so i'm going to drag that up there okay choose a price great and again i am going to center all of this and i'm going to margin top my pricing grid i'm gonna make a video on why i'm loving margin top more than margin bottom lately uh a lot more i'm liking it a lot more and i'm gonna i'm gonna create a whole video on why i like margin top versus margin bottom we'll do margin top l all right so i'm gonna hit save on this and we're gonna pop a uh class onto here so this is gonna be our price card so we're gonna do price card bang save and refresh okay so we obviously don't see anything let's put a background on the price card so we're gonna do var shade white and that's gonna give us a white background i'm going to go to borders radius and i'm doing a custom class by the way i'm still using automatic css but i'm doing it in a custom class because automatic css is one of the only utility frameworks for oxygen that gives you hooks using variables all right so very very powerful stuff so i'm going to do var and this is going to be radius m that's going to hook into the radius system in oxygen and it's going to assign that radius to this custom class and then i'm going to do some padding in here let's do none var and you know what this set is set up a little thinner than i like we're going to tackle that in just a minute so this is going to be var pad uh or sorry space m and i'm gonna copy that basically apply that to all okay and then i just need to throw like a let's see what this looks like so yeah let's just throw a heading in there add heading please thank you all right and then i will make this an h2 and then our price card needs to be aligning everything to the left and then we're gonna do price card and then i do double underscore if you i do need to make a whole video on on bim uh but this is gonna be our heading for our price card so that's the way we do the class naming convention to keep everything nice and organized i'm going to go to typography our line height on this is going to be like 1.2 there's a whole training thing that's just set up from scratch it doesn't have all my normal stuff in it so we just have to do a little bit more customization than normal and let's actually make this an h3 perfect and i'm going to look at our reference it's going to say single appointment awesome and then there's some text after that and that's going to be like our description so this is going to be price card double underscore description and on the heading i can do margin bottom and i can do another hook space s for small spacing and then i'll save okay i want to come to just really quickly because i hate a squished kind of website um why are my global styles not available settings okay i don't have global styles i guess we won't be changing that uh let's do a double price card instead then because i want these cards to be a little bit bigger so i'm gonna change that grid three to a grid two i don't know why that's broken and this is the beta so i don't know of oxygen maybe running into an issue there i'm also going to do stretch on here so that these can be the same size and i'm not i'm just going to leave this blank for now because i want to eventually duplicate this card so single appointment i can actually just steal our text from over here to speed things up okay and i promise we're about to get to pseudo-elements because we're going to tackle the price now all right so we are going to add a text element and this is going to be called price not rice price card double underscore price okay and i'm going to go to typography and i am just going to go with straight up rims here we're going to make it big like we have it wow that's super big let's go with eight line heights going to be one we don't want any of that ghost padding in there and then i'm going to make this the price and i think that was 29 let's not put a dollar sign in there so just put 29 in there i think that's about yeah it's about the right size and we'll go to typography font weight like 800. oh let's make it super bold uh and then let's use a color we'll do var primary let's do var i haven't coded the colors in here yet like what's accent look like nah that's no good uh secondary is that oh okay we'll just roll with that um yes all right so on our little description here actually on our price card let's go spacing margin top we're going to use a variable space m and then probably on the bottom as well just to space it away from everything else that's going on okay let's tackle our pseudo elements now so we're going to typography actually want this to be a little bit bigger awesome so we need a dollar sign and we need a per month but here's what i'm going to show you okay really cool stuff here so let's say you were gonna make a switcher between like usd and pounds so dollars and pounds right i actually don't know how to let's how do you make a pound sign so pound sign uh a pound dollar sign i don't even know how to how do you search for that properly there it is okay awesome so watch how we do this right so we have our price card price i'm gonna make a price card i'm just trying to show you like how practical this stuff can can really be so price card price double dash usd boom so on that class i'm gonna do a before and then i'm going to make a dollar sign and then i am going to go to typography font size 50 and then i'm going to uh do let's see let me let me go to my main class price card price usd and i'm going to go to layout flex all right so that's going to get my thing up to the top there and that's all i'm going to do that's really all i'm going to do now i'm going to do price card double underscore price double dash uh g what is it bp i think it's gbp let's look everybody in the uk is like this guy uh gpb all right so on the gpb i'm actually going to just copy my usd styling over to gpb and now i'm going to delete the usd and now i'm going to go to my gpb and i'm going to just change the content where are we in the before to that little symbol look at that so if you had a switcher imagine you had a switcher and you had two grids and you wanted one to be usd or one to be uh this uh the pound right so i can take that off i can type in usd not used usd choose the usd class and i got a dollar sign if i choose the g b p g b p i get that sign okay so that's a good practical use case right and i'm showing you how it doesn't like i just made a class and threw the class on that element and now i have new pseudo-elements available on that class i can do the same thing watch this price card double underscore price and i'm going to do double dash monthly and then on that one i have two new pseudo classes on there right i can go to the after and i can say this says uh per month and then we obviously need to style that so i'm gonna go to typography font size 30 percent okay and then i'm gonna go do my margin auto trick on the top to get it down there so now it says per month that's still a little bit big for me so i'm gonna go 20 and i'm also going to go typography letter spacing uh and let's do m minus 0.025 okay probably needs to be bigger than more squish than that awesome and then i'll go to just so you guys can see other things happening opacity 0.7 and i'll go to my before as well which is on my usd before opacity 0.7 there as well now that doesn't look so great we'll leave it like that okay i can also by the way go to margin if i want to bump that over a little bit and i can do margin m let's do like 0.25 and that'll just bump it away a little bit maybe 0.15 just give it a little bit more breathing room right so it's like not on top of the number so there's my 29 per month but i still need a maybe per year right so i'm gonna make my class price card double underscore well i misspelled it let's try again not ice price it's lagging like crazy right now price card double underscore and we're gonna do uh annual uh no sorry i need to add the price the lag kills me and it's throwing me off price double dash annual and then i'm gonna take the monthly design i'm gonna copy that those styles and add it to annual so i don't have to redo all my work again delete monthly go to the go to the after and change this to per year so if you have one price that's per year and one price that's per month you don't have to create new elements you just pop a class on or pop a class off right um so there you go we just did practically speaking two pseudo elements if i were to duplicate that card and so i make this say single appointment uh let's say subscription something like that and i'll say this is going to be 29 no it's going to be uh 290 right and i have the per year the 29 is going to be per month so i'm going to take off the annual class and i'm going to pop on the monthly class and now that one says per month this one says per year they both look the same right they're both pseudo elements so very very easy all right so the next thing we're going to do is tackle these actual uh features right so i'm just go i'm not going to add a div and an icon and text and try to align them and then duplicate duplicate duplicate and all of that stuff i'm literally just going to write uh put a text module in just like that and we're going to make it say some stuff like this same day appointments i'm going to add a class this is going to be price card double underscore feature enter and now that i have a class i can feel free to duplicate and i just don't want them all to say the same thing so i'm just going to copy this out real quick grab that one and grab the last one we'll just rock and roll with four for right now all right cool and because this is a class i can grab it i can grab it i can grab it oh gosh beta beta's giving us problems y'all beta's hurting us right now let me go to structure let me go in here let me go in here now it's this card let me see if i can grab that here oh gosh gonna have to refresh okay man i love betas right um it didn't remember anything i just did uh so i'm gonna go ahead and put a text box in again and hopefully this time it doesn't uh die all right price card double underscore and this is going to be feature well remember the class all right duplicate duplicate duplicate duplicate and i'm going to add a margin to the bottom and we'll do var space xs perfect and that's looking pretty good i kind of want more spacing here all right the beta is really all right where are we at price card price okay so m is good there it's good there let's change this to l let's just make a lot of uh breathing room here okay that's better all right so now i can just copy these in okay so i've got the content in there i've got a class on there and then what i'm going to do is i'm going to create two new classes so we're going to do price card double underscore feature double dash included excuse me this is where i'm going to attach my little icon to okay so what i'm going to do first is i'm going to go to background actually sorry layout make sure that that is set to flex just your main class then what i'm going to do is go to my before and we're going to start styling our pseudo element or creating our pseudo element so we need a background image so i'm going to browse for that image it's going to be the check mark now this is complicated by the fact that i don't have svg support on here so i put pngs in from the noun project and they actually have padding around them so we might tackle how to solve that it does create some complication if you're using an svg with no extra padding it's going to work a lot smoother than this but i'm going to go ahead and select my check and select image thank you awesome you don't see it yet because um it needs some size and spacing so width i'm going to do ram 3 now you see that there's like a placeholder for it and i'm going to do background and i've already got that there i need to position this left fifty percent top fifty percent i need to make sure that it does not repeat and then i need to set a manual background size and come in here with a rim of like three and then height we can do that as well all right so and actually i don't even think we need the height so i now have a check on my feature included class i also want a feature excluded class so we're going to do price card feature double dash excluded and then i'm going to copy all that work that i just did on included over to excluded but now when i take off my included i can go change my before background image to an x and now my excluded class makes an x instead of a check see what i mean about the padding in there so let's see if we can fix that real quick so i'm going to go to the before that's holding my icon i'm going to go to layout relative and left side i'm going to do 0 it's going to actually need to be negative i'm going to change this to rem let's try -1 oh like right off the bat just guessed perfectly okay um and then on the on the margin right i kind of need to pull some of that back in so minus 0.5 like to pull the same day appointments back in a little bit and again this is just because i'm having to fix that padding issue that was in there before now the easiest way to do this is to add the included class back copy my excluded style over to included and then i can get rid of the excluded class go to my before sorry this is this is just you don't have to do this a lot of times i'm just if you run into this problem i'm showing you how to fix it and then switch this back to my check so it has the same styling all right so look at this if this is included i literally come down i type included and i say it's included and i get a check mark and if i say this one's included i get a check mark like i don't have to worry about putting physical check marks in there included now this one let's say it's excluded and you could also do other things with your excluded class so you could say hey if it's excluded then i want to go to effects opacity 0.5 so it's great at the whole thing is grayed out i didn't do that on my pseudo-element i did it on my main class i've excluded but the whole thing is grayed out now that is a super easy and practical way to to deal with this kind of stuff because look what happens when i duplicate my card and i come over here and i say well on the yearly that's actually included so i remove that class i type included it's included save boom i didn't have to move checks around replace checks with x's i just it's classes control everything um on mobile let's say on mobile we don't want these uh check marks and x's i don't know why you wouldn't but you could now come down to like 768 and or let's say 480 and you can say well there's just not enough room in here for those icons okay cool so you go to price card included you go to the before you go to layout display none now you don't have any icons on mobile devices for things that are included right you could maybe leave the excluded one you can do whatever you want to do because the infrastructure that you built was all built properly with pseudo classes last thing i want to show you is these little badges all right so i'm going to not put i'm i'm not going to put an element inside this card at all we're going to put a class on the price card and we're going to call it price card double dash featured or we can say let's say best value we'll just say best so price card double dash best all right i got pseudo-elements to work with so i'm going to use the after in this case and i am going to put content in the content box it's going to say best value look where that shows up way down here that's obviously not where we want it so i'm going to say that this needs to be first let's style it a little bit more so we're going to say background color we'll do var primary okay and then on the text color typography color we'll do var shade white so this would be white text and then let's do some padding so we'll do m let's do two two that's left and right padding on the top oh i also like to go to typography always just clear the line height out on these kinds of things because it gives you ghost padding that you don't realize you're dealing with so we'll do one on one that might be a little aggressive we'll do seven five five okay point seven five there and then this might be like four and four we're gonna kind of we'll we'll see how big we need to make it in a minute uh we'll also go to typography well i love that that's cool oxygen like it's leaving the the pink padding thing there uh typography let's go upper case on this and let's go with font size needs to be a little smaller let's hook in let's go var text s there we go perfect okay um size and spacing i think we're good let's go to layout absolute bam so it pops it up to here but when i try to position it it's probably going to fly away see how it flew away we've already talked about how to solve this problem i go to my main thing price card best not my pseudo element just the best class and i set that to relative and now it's attached itself to the card now i can say right zero and we are going to have to uh oh wait i need to go to my my after that's the thing i'm trying to position so right needs to be zero i can take left out of there now now it's off to the right now i can just transform it so let's see how we're going to do this we're going to go to i think it's under effects transform rotate 45 bam look at that now i i do need to position it a little bit better i'm probably going to need to translate it now so i can go to again effects transform add transform let's do a translate okay so translate on the x-axis i always have to like just play around with this stuff uh let's do 10 20 25 would that do it oh yeah that's perfect duh okay what am i thinking um now we're going to translate it why we need it up into that corner more so i'm going to do like minus 5 minus 15 minus let's just make it a little bit bigger so i actually don't need any more padding let's do width rim i don't i didn't even need to do it with padding in the first place let's do 15 we can take some of this padding off just like one and one okay and then let's typography center it it's kind of weird because you're looking at a tilted thing trying to trying to play with it um sizing let's do 20 rim it doesn't matter it just needs to be like big enough to go off the edges now i need to translate it a little bit more i think so we'll go to effects transform translate minus 20 on the y okay that's good now you're like kevin that looks absolutely awful you're right so we're gonna go to price card best layout and now i'm i remember i put this class on the card but it's only the best class right it's not my main price card so i can do a lot of things that i'm not doing on my actual price card like make the overflow hidden right so remember i put this class on the card i can effectively say don't let that pseudo element that i'm also attaching to this class go outside of the card which the class is attached to if you're a beginner you're like what just happened right but if you're not a beginner you're realizing kind of what's going on here that i've just made this uh not be able to go outside the bounds of the card so if that overflow is visible that's what you get if the overflow is hidden that's what you get so you don't need like you don't need to measure i'm pointing at my screen like you guys can see my finger again you don't need to measure like the distance between the top and the right side of the card and get it perfect and like cut things off and figure out ways to do that no no you just put a big ugly ass block there and then be like i don't know just hide everything else like that's that's how i do it anyway but no that's that's legit how you do it so let's look at it bam there we go because it's all pseudo-elements like it doesn't matter what happens on mobile like we're getting it to be nice now you might run into a problem right there see that a little overlap action there so all we need to do is make sure that we're protecting that text over there so the best way to do that make sure that that text doesn't get anywhere near the right hand side there's a bunch of ways to do that um you could do padding over here on the card or you could just assign like a max width to that text so we can do rim uh let's try 24 is that gonna be too big no that's perfect okay so now it'll never get over there boom and that that's a little extreme right we could we could say uh let's see what's 32 do okay that's good it's just breaks away but basically that thing can get all the way over here and it's not going to touch save all right boom now we come in and we're good like it almost touched but it didn't all right so we're pretty good you could finagle that on mobile devices whatever you want to do the whole point of this we're not trying to make this perfect we're trying to teach you how to use pseudo elements so we used a pseudo element for our dollar sign which we also saw we can use pounds and dollars just based on changing the class per year or per month just on basis changing the class by the way we didn't we needed to do this per month we never did that so i take off my annual class i drop in my monthly class now it says the correct thing so let me go to the front end boom 29 hours per month or 290 per year we saw how we can do checks and x's by adding or removing classes we got a little best value tag going on here this is the power of pseudo elements if you love this video hit like drop a comment below if you have any questions if you feel like this really helped you understand pseudo-elements better in a more practical way drop a comment and let everybody know like let when when people are looking at videos they're like did this help anybody and they read the comments and if everybody's like man this helped me this helped me this helped me they know to watch the video if there's no comments they don't know if they should take the time all right so just help them out drop a comment drop a like make sure you're subscribed to the channel i'll be back very soon peace

Channel: Digital Ambition

Views: 2,431

Keywords:

Id: Np4uDHmJ1s8

Length: 41min 39sec (2499 seconds)

Published: Fri Nov 05 2021