Three fun uses for ::before and ::after

I love using the before and after pseudo-elements. They're super handy for a lot of different things, and in this video I take a look at three different things you can use them for.

🔗 Links

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[georgewoodman]

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

[vinnym]

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

[DevMadeEasy]

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!🙏

[simonswiss]

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 👍

[gwemula]

You blew my mind again with these tricks!
KP, you’re the man!

[maandesai]

THANKS FOR MAKING SUCH INFORMATIVE VIDEOS KEVIN

[ronpalmer]

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.

[Rallosz]

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!

[AaronGrogg]

Love the filter: blur(), especially for the :hover!! :-)

[bikinglikebecker]

hover on the cards with oversizing i like... TY for sharing.. articulated.. you and network chuck are noticeably my favorite so far as I learn from scratch...
i also really like how @ 10:24 when you blur, the color on the right image in bottom left corner really starts to "glow"(shadow), haven't seen color like that since the 80's & the ski bunny jackets.
fascinating learning these other things while I get over learning to connect sql to my webpage design for customer application doing a simple delivery scheme.. So far I figure I have to make some tables in the db for taking orders, sending orders & keeping track of orders to their userID(acct)... It's fun learning like getting to know a video game... set goals, save gold.. 8D

[Darkray]

Wow that were some great tips! Nice doubletime at the end 😂😂 Have a nice weekend, Kevin 😊👍

[TNYDCK]

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.

[vukkulvar]

You can use a linear-gradient() of translucent black instead of doing weird things with ::after
You can also use text-shadow to only improve contrast around the text
background-image allows for multiple images, not just one.

[chhavimanichoubey]

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.

[vasyaqwe]

I keep coming back here, this video is so helpful. Thanks, best teacher

[westernpigeon]

i was just doing research on ::before and ::after and you posted this. THANK YOU

[benja-min]

Thank you Kevin! How about some tips on content: openquote, content: attr() and content:counter(). I found these super helpful recently and wish I knew them years ago! Keep it up man.

[iDATUS]

I clicked the popup link and got a Kevin before and 3.5 years after. not sure if he was relative, fixed or sticky but he was an absolute on the topic!

[capellaguitar]

Man, you're just amazing! I've been learning so many new things thanks to you, so: thank you! Cheers from Rio!

[genesdada]

wow! men powerful css tips (mix-blend )mode beautiful sir.