Three fun uses for ::before and ::after
123,497
Published 2021-09-02
🔗 Links
✅ The code: codepen.io/kevinpowell/pen/LYLEPwz
✅ My ::before and ::after video: • Before and After pseudo elements expl...
✅ More CSS quick tips: • Fun CSS tips and tricks
✅ Jhey's color trick (on Egghead): egghead.io/lessons/css-use-css-pseudo-elements-and…
✅ Follow Jhey on Twitter: twitter.com/jh3yy
✅ Adam's gradient trick: twitter.com/argyleink/status/1429075313158496261
✅ Follow Adam on Twitter: twitter.com/argyleink
⌚ Timestamps
00:00 - Introduction
00:39 - Increased legibility
04:51 - Color effects with images
09:16 - Gradient shadows
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more a
All Comments (21)
-
OMG I've just covered pseudo selectors today in boot-camp. Your tutorials are life saving Kevin. I mentioned to my tutor today you'd tweeted me a solution to an answer about box sizing & my tutor questioned my source.When your name was mentioned he said ahhh the guru, no arguing with his answer......
-
I seem to learn a new thing with every video, even if it's not what the video is about! I have never used isolation: isolate; before and have always been left with a mess of z-indexing on different elements. This is going to help so much going forward so thank you Kevin
-
You blew my mind again with these tricks! KP, you’re the man!
-
absooooolut ely awesome content, long time ago I really didn't understand the concept of pseudo-classes but after watching your videos I'm in love with the pseudo concept.
-
Hey Kevin Powell {Position: 👑King of CSS} ::before and ::after is not an easy thing for beginners, so great content, as always!!! I just 💜loved it. Thanks for sharing it!🙏
-
Nice use of the `isolation:isolate` property here! It's always kinda hard to teach with real life examples, and that was a good one 👍
-
Thanks for this. A big fan of these two pseudo elements, and always looking to do more with them.
-
THANKS FOR MAKING SUCH INFORMATIVE VIDEOS KEVIN !!!!!!
-
You're going to make me look like a genius with all of these tricks in front of my classmates!! Even the small things you do are so useful!
-
Man, you're just amazing! I've been learning so many new things thanks to you, so: thank you! Cheers from Rio!
-
Always learning something new with Kevin !
-
i was just doing research on ::before and ::after and you posted this. THANK YOU
-
Fantastic tips and styles!! Thank you KP sir 🙌🏻
-
Brilliant teacher! Thank you Kevin!
-
I keep coming back here, this video is so helpful. Thanks, best teacher
-
Awesome content Kevin, thanks a lot.. that gradient border looks so awesome.. yes I'll steal it 😌
-
Thanks for sharing. For the latest point, I may use multiple line box-shadow setting to achieve. But you give me another road to go. I think the gradient border card is also the interesting task for this part :)
-
I was just watching this for fun but you solved an issue I had with border-radius. I have images in divs with rounded corners and I struggled finding a way to keep the square corner images from showing past the rounded corners. I found a way and made it work but missed one and needed to fix it. This overflow: hidden solved the issue easily. I have yet to master the overflow feature but this trick is nice.
-
Instead of a gradient you could use a drop shadow for the text. Center it, reduce opacity and blur the edges. That way you do not notice it but the text becomes easier to read.
-
I love your works, thank you
