CSS Before and After pseudo elements explained – part three: as design elements
- December 22, 2023
- Posted by: MainInstructor
- Category: Go
Video Title: CSS Before and After pseudo elements explained – part three: as design elements
Hi there and welcome back we’re continuing our look at CSS pseudo-element specifically the before and after pseudo element and different cool things we can do with them so we’ve already looked at just generally what they are and how they work we’ve looked at the content property and then we’re
Gonna be looking at them as design element so we’re gonna be seeing how I created this red bar with no extra markup and it sort of hides we can still see our heading and it will follow our screen around and then we’re gonna be looking at these two cards here we’re
Gonna be doing these hover effects like this so it darkens around we get these lines growing in and out and there’s no extra markup done it’s all done with CSS to get all this cool stuff happening so welcome if you haven’t seen the last two videos I’d strongly recommend you check
Them out especially the first one where we really look at how the whole before and after thing work cuz it’s kind of weird and not everyone really realizes how they’re working behind the scenes if you’re new here my name is Kevin and I make videos like this every single week
And yeah these you know we’re looking at the pseudo elements here so before I dive deep into this I just want to give props to this code drops article so if I come over here and this is where I got the idea of using pseudo elements in fun
Ways and there’s just lots of awesome hover effects they’re doing here they have two sets of stuff you can even go to the original article to get a bit more information and sort of an explanation on how they did all this so if you want some more stuff please check
These guys out alright so let’s jump right into it what I wanted just before we get before we get into the code itself one thing that I do want to look at here is just I have put this Universal selector to alter my box sizing for border box just to make it
Easier for me this means if I add padding or a border to something it doesn’t add to the size of something it’s included in its width the content itself so that just will stop weird little glitches from happening now one thing you might not have realized is if
You do the universal selector it won’t include the before and after elements you actually have to universally select those as well if you want to get the border box working on those other than that I will be using sass to write this I’m not gonna be doing anything too
Complicated or a CSS I should say and just for some nesting on some things because it’s gonna make my life a little bit easier if you don’t know about sass you should still be able to follow along without any major issues so we’re gonna start up with the title area up here
Which is just a fun little effect that looks kind of cool and it’s nice that you don’t need an extra markup or anything to do it we don’t need a div as a background and then a second a separate background you know like that we can control them sort of separately
Which is really really nice so just quickly if we look at my markup here I all I have up here is an h1 class intro and there’s nothing else there I don’t have any divs I don’t have anything else over there so what we’re gonna do is we’re gonna find here I have
My div class intro on here all I’ve done so far is a position:relative and I’ve also put a display:inline-block just because I want to connect sit easier for the size of it I have a text align Center on the whole document also so what I want to do is I want to control
The before and the after on here so because I’m using a CSS I can do that like this and do and before and after both of my before and after are going to be sharing properties and if you’re not used to sass this would be the same
Thing as coming down underneath and just writing out intro before and writing my code that way so if you want to follow along don’t nest yours inside there just write it out like this so I have my before in my after and a lot of the things that we’re gonna have on these
Will be exactly the same so such as the content property and because we’re using them as design elements and I think content will be nothing I don’t want any content in there but but as we know now through the other videos we’ve seen we need to use this or else we don’t have
Anything to manipulate we’re also going to give them a height of 100 percent display block because that’s gonna make our lives a little bit easier and let’s give them a just so I can see it or we will see them in a second let’s actually separate I just want to put backgrounds
On these so we can actually see them some way and before we’ll give that one a background of light blue and after we’ll give that one a background of the final color will be my color red here so we’ll just do that now we don’t see anything yet I’ve given them a
Height but I haven’t done anything else with them there’s no there’s no with to them so here I’m just gonna switch I’m gonna make a position:absolute because I do want to be able to control exactly where they’re gonna be and for the moment just so we can see if these are
Working let’s start on this one here and give this one a width of 100% so that we can actually see that my block is coming in and actually we can probably give this one a background to background oh it has a background not a background I
Mean a width width of 100% for the moment and there we go so we can see I have my two boxes now this isn’t exactly how I want them to be positioned obviously so they’re display:block but because they’re position:absolute there and my width is 100% it’s matching the
Width of my I’m going to turn off the before one so I can see my text so it’s actually matching the width of my text and this is the reason I gave this display:inline-block if I’d done display:block on this that red bar would stretch the whole size which is what I
Want but if we get become really hard for me to match the width of my text with my before so we’re gonna leave this on display:inline-block but for my width on this instead of 100% I’m just going to put 100 vertical width and now I get this annoying side scrolling problem but
This is going to be a hundred percent of the screen size the only thing is I need to move it into the right spot so luckily that’s not too hard to do I’m gonna do a left on this of 50 50 percent and that should line up the left side of
This box dead in the middle of the screen because this is Center aligned my here’s generic heading is Center aligned so by doing the left 50% it’s putting this right in the middle of my screen and then what I can do is the very useful transform translate X negative 50%
This is a nice trick to Center something on my screen so you can see I have no vertical scrolling now our horizontal scrolling I should say and so what’s happening is this is moving it to the right dead middle of the screen so the
Left side of it is dead in the middle of the screen and then this is moving it 50% of its own width negative the other way so the first one is dealing with the absolute positioning so it’s looking right here and then the second one is looking at its own width and because
It’s a hundred vertical width it’s going to move back exactly to where we want it to be the only thing is I want it to be underneath my text so I can also add a top zero and there we go it is now in place now obviously I can’t read my text
And that’s a bit of a problem so I’m gonna turn my light blue back on for a second just so we can see that it is working but the only problem is my light blue is behind my red text just because this is before and this one is after so
What I’m gonna do is I could actually one thing I could do is actually switch these around to be the other way around and that would solve that rum but I have to use a Zed index on this anyway so as that index on my light blue of will do a
Negative one on that one actually and will come over on this one and do a z-index negative two and that’s just gonna place the red one behind the blue one the reason I’m going with negative here is if I put a zero on that it’s at
The same set index of my intro and my intro does have is that index on it now of defaulting to zero just because it has the position relative so what’s happening here is you know because this is zero and it’s in with this it just ends up overlapping so I’m just gonna
Give that a negative one so it sort of orders I have my content then I’m a negative when Zed index so it’s being pushed backwards and then I have my negative two which is being pushed behind that as well now with this obviously I don’t want this to be light
Blue I actually want it to be white and you can see it’s starting to come together I have this really annoying one pixel line underneath I’m not actually sure why that happens is this and this the white and the red should have the exact same height and I
Think in Chrome this doesn’t actually happen but it just means that I’m gonna actually remove my height from this one and put it on here instead so this one will have a height of 101 percent whereas this one can stick with a height of 100 percent just to make sure that
It’s a little bit you know the white is a little bit bigger and it’s covering that up you could also use top and bottom on these to play around with it instead of doing a height now the one problem is it’s way too close to those
So on my before here so I’m just going to come on here and say a left of like negative 20 pixels a right of negative 20 pixels and does this oh I’m gonna take my width off on that one actually and there we go um so I’m getting
Negative 20s giving my my space here in my space here now as I mentioned the advantage with this is here is you know if I put if I change the content inside of this it’s still gonna grow and shrink with it which is really really handy it
Does have one little flaw though I’ll let you know if it breaks on to two lines the background thing will disappear just because of the way the inline block is working and a couple of other things basically what’s happening is the it’s it’s too large now because of the way it
Works so you could always build a media query in and play around a little bit with this here because I think if I made this like that you can see it’s starting to come back in it’s just this white thing is gotten too big so a simple
Media query could always fix that in a way it also depend on how things are breaking and you know this could be set up a little bit differently but it just gives you an idea about what we can achieve without any extra markup this is
Just with an h1 we get this cool effect that will grow and shrink with my text and won’t have me and have to do anything under the more fun effect though of my card title so right now on these cards the only thing I have
Happening is when I hover on top and off the card title is appearing and disappearing and let’s go look at the structure of my card first so basically I have a div class card it has an image in it so we can see the two pictures here these are
My two pictures and then I have a div of card text and my card text is just has the title and the body so the title the title there and the body here I’d actually don’t like this yellow picture so let’s change that to whoops that’s
Not gonna fit three 399 I think it just look a little bit nicer yeah we’ll go with that one so I just have the card title coming up on hover so if we come and look down here and you can this pen is available if you want to see how I
Did these cards because I’m not gonna look into it in too much detail once again I’m going to be using a position:relative on it and there’s my card image so it’s just a max width of 100% to make sure it fits display:block and oh this transition it’s not we’re
Doing anything right now but it will be shortly the card text has the opacity so when I hover on top it’s going from an opacity of zero to an opacity of one so we can see it and that’s about it there’s nothing too fancy going on with
That the reason I have this opacity on my card image here is because I wanted to add one thing because when we hover depending on the you see this one’s really hard to read the text and this one’s not too bad but we want to make it
A lot easier to read the text so card image what we can do is actually change the opacity to like a 0.7 let’s say and if we want that to transition we should put it here too I like doing it without the hover first just so I can see what
It’s actually gonna look like and I’m gonna lower that a lot actually point four maybe I wanted to be pretty dark so on my card itself I have a grey background a dark grey background so when my we’re gonna do let’s just do it now hover no this should be one so my
Opacity on the image is one but when I hover on top the opacity drops down so the gray Zin which makes it easier for me to read the text there we go it’s working on both of them so that’s already a nice little effect but I think though you
Know the sliding things and all of that will be really awesome so let’s go and do that so I’m gonna come on my card here and what we want to do once again I’m gonna set up both my before and my after at the same time because a lot of
Them are going to share the same properties once again we’re gonna have a no content on them we’re gonna give them a position Posey absolutely and I want to see what I’m doing because right now we can’t see them at all so let’s just give them a background of
We’ll do pink just so I can see what I’m doing so I’m actually let’s give it a top of zero bottom zero left:0 right:0 and there we go we can see it and I think what I’m gonna do is actually take this pink background off of both of them
Because the first one we’re going to play with is the before so we’ll work on the before first and then if we need to put the background on the after one after so right now it’s covering the whole thing and I don’t actually want it
To be doing that I want to move it in a little bit so I’m gonna switch this to like 1.25 M and we’ll just switch all of those over so it’s not actually going all the way to the edges of my box it’s taking up it’s going glitchy oh because
Of the way this is it doesn’t matter too much don’t worry with the glitches though they’ll be fixed once we’re done with this so we can see where it’s positioned on the card and now what I want it to do is instead of having a background obviously we don’t want it to
Have a background but I’m gonna leave the background on to start with and then I’m gonna switch it over to how we’re actually gonna get the effect out of it just to leave a little bit of fun so on my before here what I’m actually gonna
Do is I’m gonna change its scale and to do that it shouldn’t be scaled to be trans form scale and we’re gonna do if I do zero whoops if I do a zero on it we just don’t see it at all now I want to do my
Hover now to do the hover I’m gonna do and hover before so just in case you’re not used to sass what this is is card hover before so that’s what I’m working on now I’m working on when I hover on top of my card so when I hover on top I
Want to change what’s happening with my before so we’re gonna change the scale on this so let’s do a transform scale and transform that up to one and I’ll come back to here and do a transition transform these out 250 he’s out 250 milliseconds so now when I hover on top
You’ll see that it’s growing in and out like that which is kind of cool it’s a fun effect on its own but it’s not really what I want to do what I want is I want those lines to sort of grow in an interesting way so a cool thing you can
Do is scale that I only learned about recently is I’m gonna do scale 0 comma 1 and on over here we’re gonna do a 1 comma 1 so what this means is it’s starting at a scale the X is on a scale of 0 but the Y is still at a hundred
Percent and then when I hover both of them go up to 100% so if we go and look now it’s growing from the middle because my Y which is the up-and-down is always at a hundred percent it’s only my X that’s changing so we see it doing this cool little effect like
That now that’s pretty much what I’m after the thing is we don’t want a big pink box to be growing in and out like that we want some lines so I’m going to turn off my pink background here and I’m gonna give this some borders so on my
Before we’ll do a border left trying to think no I want the border top not the border left border top one picks solid white and my border bottom one pixel solid white so now when I do that you can see it’s those lines that are growing instead so my lines are growing
In and out so that’s really cool now we want to do the exact same thing on my after so we’ll come down and we’ll do my I’m gonna do my after here just because I like keeping all my hover stuff together so and after so I’m actually
Just gonna copy this whole thing copy that paste it in but I’m gonna switch it because now they’re doing the exact same thing but I wanted to grow up and down some put this to one this one over to zero and let’s just copy this paste this
And I’m going to change this after so now when I hover I made a mistake somewhere here oh my borders should be a border left and a border right so now when I do it you can see they’re growing up and down and the other ones are growing left and
Right so I get that box it’s forming you could definitely just leave it there and have a box like that I sort of wanted the edges to cross a little bit instead of like overlapping a little bit so I think it’s a little bit more fun here
Just to say that the scale changes a bit more so I’m going to do like a 1.05 on this and a point zero five here so that should you know so you can see now in the corners there’s like they overlap each other you get that nice little
Overlapping effect on the corners no I just realized when when I was doing this I didn’t realized why it was happening and I just thought of it now but if I’m hovering on top of this you can see that it’s not really working the backgrounds
Coming it’s only when I’m on top of the outside part and it’s because I made a bit of a mistake right at the beginning so let’s go ahead and fix that and I think it’s a good little learning experience so here I put the hover effect on the when I’m hovering on my
Image itself so the problem in here is on top of my image but here I’m on top of my after before they’re on top of my image so it’s not registering is hovering on top of my image it’s only registering it as hovering on top of the
Before or the after thing but out here it’s working and that’s why the whole time I was doing the demo you saw my mouse that was out here and I knew I’d had this working before so I was a little bit confused by that and the
Mistake that I made was it shouldn’t be when I’m hovering here what I should be doing and I’m actually going to steal this away a little bit we’ll leave it here is just I want it to be when I hover on top of my card so card hover my
Card image that’s inside has the opacity what was it it’s something like that so when I hover anywhere on top of my card the card image opacity will lower and then we get that nice little effect and that’s it that’s how you make I really you know this cool little heading bar I
Like that more is a little hacky type of thing and then there’s just nice little hover effect on this it’s just some of the possibilities that are out there but it’s really cool that we can have a card with really simple markup and you still get the background that can change and
These lines growing on it the text appearing and disappearing go out and explore what you can do with pseudo elements and try different things there’s a million different things you can do with them they’re really awesome design elements as you saw in this video and in the previous ones really nice
Ways to improve your designs and do really fun things with them so I hope you liked this video if you did like it please hit the thumbs up and let me know just a quick word if you’re not used to using sass and you’re a little bit
Intrigued by this I am working on a course to teach you sass it’s not ready yet but there is a link to it in the description below where you can find it more information on it and you can go and sign up to find out more about it
When it’s getting closer to lunch and if you do sign up for that when the course does launch you’ll also get a nice little discount on the course for whoever is on my list with that out of the way thank you so much for watching and whatever you do don’t forget until
Next time to make your corn on the Internet just a little bit more awesome
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
For these kind of effects, outline – offset with some transitions also cool.👍👍
Your channel deserve 10 million subscribers.
Thanks for all the videos Kevin.
why my border property on .card::before isn't working ??any solution?
I came up with the following solution to add the red bars around the title:
.intro {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-gap: 0.1em;
}
h1::before,
h1::after {
content: '';
background: $clr-red;
}
It works in the CodePen but I'm not sure if there are any drawbacks to it.
Thank you so much!
This is so cool!
I like using before and after as a nice colorful thick underline that is 30% of the width of content.
These videos are GREAT! Thank you so much for sharing.
Kevin, realy thank u for this series of videos. Love from Brasil .
Thank you master, all explained clearly!!
the before and after add too many possibilities to your design
i can barely see your html codes
Kevin, you're a boss
This man a legend
I'm still very, very early in my front-end journey but watching stuff like this blows my mind! I can't wait until I get to a point where I am implementing stuff like this into my sites!
You're the best. Just finished this series, and I was trying to do something similar to this on a website I am currently working on but could NOT figure out how to make it look good. This answered all my questions. Thank you for your amazing work!
Thanks a lot for these three videos!
You got my brain working 😂 i was thinking with you along the video to find out how to do it.
Awesomeness is a fact 😍😍 thank you
This stuff is amazing and completely changed my view on what is possible with just css.. Thanks for this! Subscribed
I had an idea replace a blocky looking footer section with a simple text based section, but that meant finding a way to separate content without using background colours or images – I've watched this video so many times over the years without fully understanding how I could use it. And now today when I needed inspiration and direction I remembered it! So I follow everything on the video and place a 50% height before & after behind h3 text, set the after color to transparent, reduce the height to 50%, give it a 3px border-top and push it down using vh, until I've basically got a horizontal rule with the brand name nicely centred. I even managed to place it all in a centred container so it only takes up 90% width. It looks a lot better than that messy description – Honestly I can't thank you enough for sharing so much knowledge, your teaching keeps me going forwards. Thank you
Thank you for this 🤩🤩🤩🤩🤩
Yeah, this video unarguably belongs in the CSS Swag District.
Awesome!
You are Perfect! thanks!😃
Your videos are pretty good, I speak Spanish but I better understand your videos than the other videos in my language
It doesn't work for me to declare &::before and &::after inside a block of code, it shows me an error saying I'm missing a "{" lol
i will really be gladful if you put an extra pen for the initial codes so i can code along with you . it becomes really difficul to remove that extra code then write it again along with you . thanks for your wonderful tutorials :3
Hello, i started learning web dev 3 weeks ago. I like your videos a lot and i am learning so much watching you. But i was puzzled with the 100vw, you said "vertical width" and i thought "what does this mean?". So i googled it and i found out that vw is relative to the width of the viewport. So 100vw is 100% of the width of the viewport. Would you agree on that?
By vertical width, you mean viewport width right?
Thank you so much for this! This really cleared up before and after pseudo elements for me and helped create a really cool effect on a page I’ve been working on.
Why don;t u put the link to the 1st video in your description, now I have to go look for it manually. Unprofessional!
Ohh God. Finally i found someone who could explain me what these elements do. Thanks a lot for giving this valuable knowledge to us. 👍🙏
Outstanding
Wow, ::before watching this video i assumed that i know something about css, but ::after i realized i am doing css in a wrong way, Thank you Sir (immediately subscribed )
Hi, stupid question. Why are you using two underscores? Are they necessary? I shortened them all to one in your codepen and the result looked the same so I’m a bit confused as to what the purpose is.
Thanks!
I can't thank you enough.
You are incredible! Thank you so much!
One of the most overlooked selectors to overcome glitches when working will rollovers. In this presentation (referring to the codepen) its .card:hover .card__text {opacity: 1;}
This will target Any element with a class name of 'card_text' that descends from an element that is hovered on with a class name 'card' .
Thanks Kevin; that’s amazing! 👏👍
Loved all three parts of the series and that link you shared also has some amazing ideas! Thanks a lot, Kevin!
Awesome. This is incredible
im learning CSS and your channel is the BEST!!! thnx a lot!!!