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
✅ The code: codepen.io/kevinpowell/pen/LY...
✅ My ::before and ::after video: • Before and After pseud...
✅ More CSS quick tips: • Fun CSS tips and tricks
✅ Jhey's color trick (on Egghead): egghead.io/lessons/css-use-cs...
✅ Follow Jhey on Twitter: / jh3yy
✅ Adam's gradient trick: / 1429075313158496261
✅ Follow Adam on Twitter: / 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
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / 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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / 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 awesome!

[@vinnym9479]

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......

[@georgewoodman839]

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

[@daniellindegren1182]

Yeah, that was a new one for me too.

[@yenumulasrinivasareddy5825]

That's a new one for me too..

[@-leovinci]

Yeah, I see it the first time, I used z-index as well...

[@gwemula]

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

[@chhavimanichoubey9437]

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.

[@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 👍

[@LorenHelgeson]

Thanks for this. A big fan of these two pseudo elements, and always looking to do more with them.

[@maandesai52]

THANKS FOR MAKING SUCH INFORMATIVE VIDEOS KEVIN !!!!!!

[@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!

[@capellaguitar]

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

[@passioncorners]

Always learning something new with Kevin !

[@westernpigeon]

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

[@bySterling]

Fantastic tips and styles!! Thank you KP sir 🙌🏻

[@ledgentai1227]

Brilliant teacher! Thank you Kevin!

[@vasyaqwe2087]

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

[@shivansh901]

Awesome content Kevin, thanks a lot.. that gradient border looks so awesome.. yes I'll steal it 😌

[@HuoShengChiou]

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 :)

[@ronpalmer7260]

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.

[@T0NYD1CK]

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.

[@minhchau3594]

I love your works, thank you

[@evanhardek2994]

Love the shirt man! Also a very helpful video keep it up!

[@Darkray201]

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

[@chriskasatka2095]

CSS Tricks and Kevin are the GODS of CSS.

[@akramdahmani7214]

Great content like usual, you're the GOAT!

[@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

[@giocaonguyen]

Isolation is really cool. I'd never known it before. Thank you!

[@AaronGrogg]

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

[@GauravKumar-ue7nz]

Thank you Kevin 😃, Last one was Coolest.

[@alem2988]

Absolutely loving your channel, learning so much as a beginner! Do you have a repo/ link to any of your code before you start making adjustments please? Personally find it easier to learn and make changes along side you whilst you explain your thought process and can experience the changes on screen at the same time.

[@boy3m]

I'm glad I stumbled upon your channel. Cool stuff -> subscribed.

[@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!

[@AlBenChris89]

Helpful video, awesome shirt!

[@andreaskarz]

Wow, I love it -- I will checkit out for my next project

[@vukkulvar9769]

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.

[@genesdada7045]

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

[@zachjensz]

Ah yes, text is the king of css

[@simonswiss]

Love the t-shirt! 🤣

[@pushkaryadavin]

Came to your channel for the first time. Great content 😊

[@KevinPowell]

Welcome!!

[@johnkeck]

Kevin, *you* are awesome!

[@amirshamekhy767]

Yooohooo king of css new videooo

[@MrSuprashadow]

Wow! Thank you.

[@cryptolicious3738]

so nice! ❤ this video

[@_PixelNinja]

Hi Kevin, I know it's not the best for legibility, but is there any chance in the future you would touch upon the subject of Neumorphism? Love your videos and thanks for sharing your knowledge!

[@benja-min1588]

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.

[@rickardelimaa]

attr() is super handy, but I wished I could use it on more than just `content`. Sure, I can style using [attribute="something"], but it would be nice to be able to use something like `color: attr(data-color)`.

[@KevinPowell]

I talked about open and close quote not too long ago, and I've done a deep dive on counters in one of my videos in my ::before and ::after series :). Not sure if I've touched on attr() though... 🤔

[@benja-min1588]

@@KevinPowell I must have missed those, my fault!

[@MosDev__]

love your shirt !

[@sovereignlivingsoul]

good video, i am always fighting to get my images setup properly and i haven't done much with mixed blend mode

[@truvc]

`isolation: isolate`!! I'd never seen that before. Love it!

[@CarAudioInc]

you production quality looking fire!

[@KevinPowell]

Thanks!

[@MeDoGAMERS]

Basically brilliant!

[@eliasgarcia1146]

Hi Kevin, how are you? I am taking your responsive course and tell you that a few days ago (on August 30, my birthday 😋) google chrome supported the "gap" property since in the course you use margin-left because it was not supported yet xD I am finally learning responsive web with that course is excellent. Thank you so much!

[@shecodes94623]

you are dope, love your energy... thnaks for the awesome content

[@genesdada7045]

These content its so sweet.

[@karsyz]

That shirt is dope!

[@imviratpandey]

U r the best in css love from India 👍

[@savankumar0]

Thanks man 😀👏❤️

[@commelinales]

Thank you

[@andrewrea2799]

Super cool 😎 tricks

[@viyanmd118]

I don’t know if it is you or my personal spy from Apple, but every time I am thinking about css tricks I want to dive deeper in, you are posting a video about one like within a couple of days. I appreciate you man

[@jasurmusaev7234]

thank you a lot

[@michelaveline]

Awesome!!!

[@2222974Vairus]

Great video. Now I do not need to edit my images manually with a dark overlay for text visibility.

[@PapaG-0101]

Wow, Not only school'n people in code but design! That was very informative! Thanks eh!

[@javierolazaran7227]

Thanks!

[@KevinPowell]

Thanks so much Javier!

[@evolutionxbox]

isolation css is a new one for me

[@AbhinavKulshreshtha]

I had no idea what "isolation" was. Now i have to explore it.

[@truvc]

if you have `inset:0` you don't need to declare width and height. I love trimming code down to just minimum necessary.

[@MyDistortedWorld]

Nice t-shirt dude

[@BeansEnjoyer911]

That shirt speaks to me on a level that no shirt ever has

[@robertzeurunkl8401]

1:40 - Keep in mind that for us Premium KZbin subscribers, your popups do not appear. So, the link in the description is helpful.

[@Turabbo]

Fun video dude. Great way to finish a difficult day. Any tips on the cool syntax for RGBA? I've wanted to use it, but I'm hesitant because I can't find literally anything on Google about browser support.

[@KevinPowell]

Everything except IE - caniuse.com/?search=Space-separated%20functional%20color%20notations

[@Turabbo]

@@KevinPowell Wow I've never heard of that term before, thank you. 93 percent!

[@henkiet7844]

Kevin, will you do a video on input type range styling ?

[@KevinPowell]

My one from last week would work for changing the color of it. I don't have anything that involves more custom work though.

[@atouchofa.d.d.5852]

Killer shirt!

[@dancarter6044]

Wow!

[@TobiasBechtleFotograf]

Very nice, i love the last one what also seems to work with images if they are set to background. But how would you then use the blur only behind the box? Bcs in the gradient u do not see it, but if you use the background you see it clearly that the blur is over the gradient itself. Any ideas?

[@TobiasBechtleFotograf]

nvmd, just my removing the isolation of the parent element it goes behind if ut has z-index: -1

[@DenisovichDev]

Amazing

[@picool13]

You have such a great knowledge on CSS and Im watching your videos since 3 years back even joined some of your free courses too. But Im little afraid for you that your channel will not grow as it should be it's because you have very thorough knowledge on the topic and you are putting everything so this makes your videos complexity level very high which target very specific audience. I can see you love your work and you are enjoying every bit of it through this channel but above what I said is just a thought which needs to be conveyed to a legitimate person like you. Love you Kevin 😁

[@sonicseaweed]

In the last example, why were the box corners sharp when he only had the before element and rounded when he had the before and after elements? 😮

[@melania239]

I fell in love with Kevin 💕

[@codingchannels4103]

With first use case isnt using multiple background much simpler option?

[@yashkamath9969]

hey kevin, i had asked this in the your previous video, pls link ur secondary monitor's wallpaper, the one with the logo thing on it

[@KevinPowell]

Oh, never thought of making that public... hrm, I'll look into getting it up :)

[@yashkamath9969]

@@KevinPowell Ohk. By the way love your content 🙂🙂

[@leomonz]

can you do css part, thank you

[@richardkirigaya8254]

0:55, "Good coders borrow, great coders steal"

[@pablosantamaria8246]

Is "Hello my friend and friends" what he says at the beginning of each video?

[@srgberni]

What is the reason of declaring 'inset: 0', isn't it 0 by default?

[@AlThePal78]

rgb(/) takes away rgba way that is something new very awesome :)

[@RobRockTwister]

Cool shirt :)

[@NotKyleChicago]

0deg = to top?

[@Stoney_Eagle]

Maybe Merlin and the king should do a colab to make something cool 😉

[@amandeepchauhan6091]

6:00 CSS wizard is talking about another CSS wizard

While it looks fine I find the examples a bit too 'magical' for practical purposes. It makes sense when you have no influence on generated HTML so you use a bunch of CSS to simulate missing elements but I find that is a rare occasion. IMHO its much more practical to just generate additional elements and apply 'normal' CSS to them. It would be interesting if you would provide an additional video where you replicate the effects but where everything is more maintainable and understandable (just an idea).

[@KevinPowell]

For me, when it comes to the decorative stuff I'm doing here, I find pseudo-elements sooo much more practical than requiring spans or divs with no content in them, and just a class. If I want a card that has a gradient background, I want to throw that class on there, and it handles the rest. I've done it a lot with testimonials as well, with the open and closed quotes generated through pseudo-elements as they're often bigger and decorative. It takes a bit more work to set up the CSS, but then when you, or a team member, applies the one class, everything comes with it and it just works.

@@KevinPowell Thanks for the reply. Keep doing what you do. I love your channel.

[@XxObserver]

"Alright Kids, next lessons i'll show you how to replace Photoshop by using CSS3 pseudo-Elements and a peeled banana." - Kevin Powell

[@kamaboko1]

Clever shirt message

[@atarixle]

Last example is not working for me... somehow this all in locked inside the div-container. I bet, like always I will find the solution after I asked, but before I find an answer myself.

[@atarixle]

I found out that in my case this only works with overflow:visible;

[@MoayadChannel]

Unfortunately, pseudo elements have rendering issues with iOS

[@rickardelimaa]

I only had rendering issues when I used `width: 100%` with `position: absolute`. I needed to use `left: 0` and `right: 0` instead. What kinds of problems did you have?

[@KevinPowell]

What type of issues? I can't think of any that I've run into 🤔

[@MoayadChannel]

@@KevinPowell I tried to make a layer over the body with ::after and it wasn’t rendered across iOS devices. However, not all pseudo elements have issues.

[@MoayadChannel]

@@rickardelimaa I mentioned one here.

[@mhdfr]

didn't know element can be Isolated too

[@JohnStrandt]

Are you Canadian?

[@KevinPowell]

I sure am :D

[@JohnStrandt]

@@KevinPowell it was the "zed"

[@GlennPhilp]

"Stealing stuff from it"? LOL Wow that was harsh.

[@muhammadsiddiqui2244]

Hmmm ... so, what I learnt is: This can also be done with CSS.

[@kestonsmith1354]

I love absolute positioning , relative positioning is not for me .

[@sameeraalutwela5279]

What

[@tysa990]

I'm sorry, INSET?????????? I'm gonna fucking cry 😭

[@rickardelimaa]

Love that it exist, because `inset: 0` is soo much better than having to type left, right, top, bottom. What's your issue with that property?

[@tysa990]

@@rickardelimaa nothing, I just only learned that it exists today, after 100 years of war with top-bottom-left-right

[@rickardelimaa]

@@tysa990 Hahaha. I know the feeling. Kevin actually had a video about that property.