At last I found someone who really knows css and what he is doing. Not mimics some code learnt from some where else. Mr. Powell you ARE a pro. And thank you so much for all the effort putting these video series together
As a beginner, no online course was really explaining what you could do with ::before and ::after and I always thought "I'll get back to it later". Well, I finally took the plunge after your video appeared in my recommended autoplay after watching another tutorial, and I just had to leave a comment because you explain so well, and it is now so easy for me and I feel like you taught me in 1hour what several days of school would have. Thank you and you got a new subscriber :)!
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!
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
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!
Watched all 3 videos that were part of the series. Great content! I can confidently say that I understand ::before and ::after, so much better than before. Thank you so much!!!
Your videos are great. I just watch any video you have randomly and find a solution to a problem I have in a design. Like in this video, I didn't realise I had to go set box-sizing on before and after psuedo elements. I was wondering why a psuedo element I had wasn't quite lining up the way I expected. Thanks!
Kevin, once again thank-you for the details on how all this works and why. Just had a thought (it happens now and then). Have you ever considered explaining the planning stages for building a website. What goes on before we hit exclamation tab.Thanks again Kevin, you have raised my ability 10 fold.
I sort of talked about it once very briefly in one of my other videos, but I am about to start redesigning my personal site. I'm pretty much in the ideation phase at the moment. I should totally make some videos of what I'm doing and how I'm approaching it.
I enjoy your videos. A super-easy way to style the .intro class "Generic Heading" is with grid using grid-template-columns: 1fr auto 1fr. (I learned this by watching your videos about grid, heh). Add a small grid-gap for white space around the text. Now the ::before and ::after elements just need background color and you're done! Keep up the excellent work, Kevin.
You are providing really great content Kevin. I started watching your channel and learned a lot of new things as well as solidified my knowledge. Thanks for your help and keep up the good work! I already subscribed :)
Man! Im speechless! This is so fun and useful! Ive already said that but you are a great instructor. I wish I could afford some monetary gratification like buying your course. I will, someday soon. For now, thank you very 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' .
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
Man,Videos are very on point and this is one of the top channels in Web Development,but i think you speak to fast,if i hit 0.75 speed then is too slow. If you can make 5% voice slower it will be great.Thank You!
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.
Another way to solve the problem of the hover glitching is to use pointer-events none to the element that is interfering with the hover. Is that correct?
I wouldn't use non-breaking spaces in my HTML for very much just because it's a lot easier to make changes to it later if everything is in the CSS. HTML = content, CSS = style. Non-breaking spaces have a purpose, but using them to trick layouts can cause some issues in the long run. Same reason I wouldn't use them to space items out, and instead use margins. Also, what if I wanted the space to be a lot bigger? Would I then need 10 non-breaking spaces? Also, in general, I like to think that I'm writing code that someone else might be editing one day. Would someone else think of looking for that in the HTML, or would they assume it's in the CSS? For a personal project it might be a different story obviously, but most of the time we're working in teams, or on projects that will, at one point, eventually, have someone else making changes to it.
Might be a dumb question but I don't understand why you had to separate out the lines in before and after...couldn't you have done everything in before and achieved the same effect?
hey man! great content as always :) The effect on the header can be much easily achieved with flexbox, having the before and after as red background, flex: 1 1 auto items. I've forked your pen with that example, check it out ;)
First David gives a better example, and now you Facundo. Very awesome approach, wish I'd thought of it! You guys are going to make me have to think more about these things going forward! Sadly my pen doesn't show any forks on it at the moment, mind sharing the link?
hmm for some reason instead of the typical link to the original, it says"This Pen is a fork, but the parent Pen is now private".. anyway, here it goes codepen.io/facundocorradini/pen/NyogMQ
I think I made the wrong pen public, I have a few versions of it! But very cool, wish I'd thought of that! Mind if I use something like that in a future video?
When I place '&::before' in my css element, I get underlined ambersand with error "} expected". Why is that? And second question 'how do you use VSC together with live preview in browser"? Thank you.
that's a scss thing, rather than nest the before and after inside the class selector ( a scss thing ) in plain css you need to do the before/after as separate styles like .intro::before { ...styles. }
Please, Kevin, I would like if you could make some video about pseudo classes, so you could show us how one can be shown when hover over some other element e.g.hover over dropdown menu...?
Hi Kevin, Love these ideas, and trying to implement into some pages. The issue I'm running to is adding in an anchor tag. I've tried adding it a lot of different places with the structure, but when the ::before/::after are stretched out over the card it deactivates the tag and so you can only select around the perimeter (kind of like the issue you identified and shifted with hover being targeted on the wrong element). Is there a way of positioning the tag so that it is still selectable throughout the entire card?? Many Thanks.
@@KevinPowell Thanks! On the note of using ::before and ::after with boxes I wondered what your thoughts were on using grid? I'm relatively new to web development and learnt a lot early on about using grid for cards - having the ease to layer items on top of each other with grid-column and grid-row being set the same on all elements- and then using flex to control the layout. This has worked great, but the frustration is the fallbacks for browsers still not fully supporting grid. I really hadn't learnt how to use ::before and ::after until now and it seems like they are very able to create highly customisable layouts for cards without the concern of it not being supported by browsers. Would you say the using these pseudo elements is the better way to go here?
You can always hit me up on Twitter or Instagram. You can message through UA-cam, but it's hard, and hard for me to keep track of too. You can also email me - hi@kevinpowell.co - if you'd like. I don't have much free time, but am always willing to help out with some advice and whatnot :)
Amazing. I watched all 3 parts and immediately solved 6 issues at my job. Instant subscribe ;-)
Very awesome, so glad I could help, and thanks for subbing!
At last I found someone who really knows css and what he is doing. Not mimics some code learnt from some where else. Mr. Powell you ARE a pro. And thank you so much for all the effort putting these video series together
As a beginner, no online course was really explaining what you could do with ::before and ::after and I always thought "I'll get back to it later". Well, I finally took the plunge after your video appeared in my recommended autoplay after watching another tutorial, and I just had to leave a comment because you explain so well, and it is now so easy for me and I feel like you taught me in 1hour what several days of school would have. Thank you and you got a new subscriber :)!
Thanks for the sub Tontonsan, and I'm really glad you like my approach!
I am more of the backend guy but your videos makes me more and more interested in frontend coding. Thank you!
That's awesome. Backend scares me, lol.
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!
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
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!
Loved all three parts of the series and that link you shared also has some amazing ideas! Thanks a lot, Kevin!
Wow!! Watching these videos is like having your mind opened to a new CSS multiverse where anything is possible.
Watched all 3 videos that were part of the series. Great content! I can confidently say that I understand ::before and ::after, so much better than before. Thank you so much!!!
im learning CSS and your channel is the BEST!!! thnx a lot!!!
Your channel deserve 10 million subscribers.
Thanks for all the videos Kevin.
Ohh God. Finally i found someone who could explain me what these elements do. Thanks a lot for giving this valuable knowledge to us. 👍🙏
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
Your videos are great. I just watch any video you have randomly and find a solution to a problem I have in a design. Like in this video, I didn't realise I had to go set box-sizing on before and after psuedo elements.
I was wondering why a psuedo element I had wasn't quite lining up the way I expected. Thanks!
Kevin, once again thank-you for the details on how all this works and why. Just had a thought (it happens now and then). Have you ever considered explaining the planning stages for building a website. What goes on before we hit exclamation tab.Thanks again Kevin, you have raised my ability 10 fold.
I sort of talked about it once very briefly in one of my other videos, but I am about to start redesigning my personal site. I'm pretty much in the ideation phase at the moment. I should totally make some videos of what I'm doing and how I'm approaching it.
I enjoy your videos. A super-easy way to style the .intro class "Generic Heading" is with grid using grid-template-columns: 1fr auto 1fr. (I learned this by watching your videos about grid, heh). Add a small grid-gap for white space around the text. Now the ::before and ::after elements just need background color and you're done! Keep up the excellent work, Kevin.
You are providing really great content Kevin. I started watching your channel and learned a lot of new things as well as solidified my knowledge. Thanks for your help and keep up the good work! I already subscribed :)
Your videos are pretty good, I speak Spanish but I better understand your videos than the other videos in my language
Kevin, realy thank u for this series of videos. Love from Brasil .
I have a new found respect for css thanks to you
Great series - this totally demystified ::before and ::after for me, and it was inspiring to see what's possible with them. Thank you!
I sure have learned a lot from you. Thank you.
You are my all time favourite instructor in youtube ❤❤❤❤❤
Watched the complete 3 parts on TV, had to grab my laptop to comment, like and subscribe!!!
Thank you Kevin...
Thanks so much Kelvin, glad you liked it enough to take the time to do that! Thanks for the sub :D
As always, Your videos are the top level of professionalism combined with great explanation and a healthy dose of humor. Great job!
Thanks so much for the kind words Konrad, really glad you're enjoying my content!
This stuff is amazing and completely changed my view on what is possible with just css.. Thanks for this! Subscribed
Man! Im speechless! This is so fun and useful! Ive already said that but you are a great instructor. I wish I could afford some monetary gratification like buying your course. I will, someday soon. For now, thank you very much.
Thanks Kevin watched all three and lights went on!
Really enjoyed the video, the pacing and your entire thought process.
*First timer on the channel*
*subscribed*
So glad that you enjoyed it so much, and a big thank you for the sub :)
I like using before and after as a nice colorful thick underline that is 30% of the width of content.
Thanks Kevin; that’s amazing! 👏👍
Thanks a lot for these three videos!
Thank you master, all explained clearly!!
This is simply awesome.....Great job...
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' .
Awesome, Kevin🤩 CSS is so much fun!
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
This is really a great learning for me,from watching your videos.
Thumbs up !
Awesome content worth watching. How did I miss to watch this content before.
Glad you're liking it 😁
Kevin Powell shared with all my peers (y)
This is a fantastic video, upping my skills and code cleanliness.
Amazing series of ::before and ::after!
Awesome. This is incredible
This man a legend
dudes, CSS seems awesome after this tutorial 🤣 Thanks Kevin
Excellent explanation Kevin. Could you please explain more about how .card::before goes behind image without setting any z-index on it.
Awesome!
You are Perfect! thanks!😃
Outstanding
Man,Videos are very on point and this is one of the top channels in Web Development,but i think you speak to fast,if i hit 0.75 speed then is too slow.
If you can make 5% voice slower it will be great.Thank You!
Haha, I'll try my best, I know I get carried away at times
Thank you Kevin. Love your tips !!! Very usefull and clear as usual :)
Thank you! I learned a lot
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.
Great stuff !
Thanks so much!
It's only your X, which changes.. LOL ;)... Jokes apart you are a great tutor.. Thanks
You are the one man ✌🏼 thank U
Really cool. thanks for the lesson Kevin!
Really loved it. You killed it ✌️
Thank you so much! That is amazing and you are definitely a good teacher!
Thanks a lot, glad that you liked the video :D
Excellent as always 👍👍👍
Thanks Sanjay!
Thank you for this 🤩🤩🤩🤩🤩
Another way to solve the problem of the hover glitching is to use pointer-events none to the element that is interfering with the hover. Is that correct?
If we dont keep position:relative , then background color will take entire screen?
Great Tutorial Kevin
I would replace the right and left positioning with " "
I wouldn't use non-breaking spaces in my HTML for very much just because it's a lot easier to make changes to it later if everything is in the CSS. HTML = content, CSS = style. Non-breaking spaces have a purpose, but using them to trick layouts can cause some issues in the long run. Same reason I wouldn't use them to space items out, and instead use margins. Also, what if I wanted the space to be a lot bigger? Would I then need 10 non-breaking spaces?
Also, in general, I like to think that I'm writing code that someone else might be editing one day. Would someone else think of looking for that in the HTML, or would they assume it's in the CSS? For a personal project it might be a different story obviously, but most of the time we're working in teams, or on projects that will, at one point, eventually, have someone else making changes to it.
Might be a dumb question but I don't understand why you had to separate out the lines in before and after...couldn't you have done everything in before and achieved the same effect?
why my border property on .card::before isn't working ??any solution?
subscribed... these are great videos, man. Thanks!
Thanks so much for the sub Andy! So glad to hear that you're enjoying my videos!
By vertical width, you mean viewport width right?
Tank you, you really helped me there.
thanks for the tuts sir! :D
when i use bottom on .card::after,my text became invisible.what to do?
Always wondered how this worked, Now I know
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 can only say: Amazing!
Glad you liked it :)
Nice tutorial. Thanks a lot.
Glad that you enjoyed it :)
Nice video. Very good work.
Thanks!
Thank you so much!
hey man! great content as always :) The effect on the header can be much easily achieved with flexbox, having the before and after as red background, flex: 1 1 auto items. I've forked your pen with that example, check it out ;)
First David gives a better example, and now you Facundo. Very awesome approach, wish I'd thought of it! You guys are going to make me have to think more about these things going forward! Sadly my pen doesn't show any forks on it at the moment, mind sharing the link?
hmm for some reason instead of the typical link to the original, it says"This Pen is a fork, but the parent Pen is now private".. anyway, here it goes codepen.io/facundocorradini/pen/NyogMQ
I think I made the wrong pen public, I have a few versions of it! But very cool, wish I'd thought of that! Mind if I use something like that in a future video?
that would be great :)
This is what people call "magic" :)
Thank you!
No problem 😀
Thank you, sir!
No problem Milan :D
Awesome... Your genius
Thanks :D
Superbe ! merci pour tout
Pas de problems 😁
Goat
When I place '&::before' in my css element, I get underlined ambersand with error "} expected". Why is that? And second question 'how do you use VSC together with live preview in browser"? Thank you.
that's a scss thing, rather than nest the before and after inside the class selector ( a scss thing ) in plain css you need to do the before/after as separate styles like .intro::before { ...styles. }
Please, Kevin, I would like if you could make some video about pseudo classes, so you could show us how one can be shown when hover over some other element e.g.hover over dropdown menu...?
I sort of did this in the previous video of this series with the tooltip on hover.
@@KevinPowell OK, I'll pay attention a little bit more to that.
If it's not what you meant, maybe put in a link to an example that I can look at
So clear!!! :)
tank you vary maatch
Thank you so much
Great thank you
You are the best !
Aww, thanks!
Sick vid!
Thanks!
Yeah, this video unarguably belongs in the CSS Swag District.
Hi Kevin,
Love these ideas, and trying to implement into some pages. The issue I'm running to is adding in an anchor tag. I've tried adding it a lot of different places with the structure, but when the ::before/::after are stretched out over the card it deactivates the tag and so you can only select around the perimeter (kind of like the issue you identified and shifted with hover being targeted on the wrong element).
Is there a way of positioning the tag so that it is still selectable throughout the entire card??
Many Thanks.
I figured it out. Put the tag in after the .card and then move the ::before/::after onto the tag instead!
Glad you figured it out Matthew!
@@KevinPowell Thanks! On the note of using ::before and ::after with boxes I wondered what your thoughts were on using grid?
I'm relatively new to web development and learnt a lot early on about using grid for cards - having the ease to layer items on top of each other with grid-column and grid-row being set the same on all elements- and then using flex to control the layout.
This has worked great, but the frustration is the fallbacks for browsers still not fully supporting grid.
I really hadn't learnt how to use ::before and ::after until now and it seems like they are very able to create highly customisable layouts for cards without the concern of it not being supported by browsers.
Would you say the using these pseudo elements is the better way to go here?
@@mwendzina thank you for the hint, I just came across this video and had the same issue with the anchor tag :) thank you both of you, guys :)
Groovy!
the video is awesome, thanks for sharing it but I have a problem with it when I say &::before, &::after{ } my code does not work.
I'm using Sass there... if you are writing regular CSS, you'll have to put '.selector::before' and not have it nested.
@@KevinPowell thanks a lot...
Merci :)
i can barely see your html codes
cool
Kevin - where do you learn all this. Seriously I am looking for someone to mentor me to be a CSS guru. I can’t find a way to pm you.
You can always hit me up on Twitter or Instagram. You can message through UA-cam, but it's hard, and hard for me to keep track of too. You can also email me - hi@kevinpowell.co - if you'd like. I don't have much free time, but am always willing to help out with some advice and whatnot :)