Before and After pseudo elements explained - part one: how they work

The before and after pseudo elements are super useful part of CSS, but are often misunderstood. This is part of a three-part series where I look at how they work, and cool stuff we can do with them.
In this video, I focus on what ::before and ::after even are and how we can use them, and even why we use the double colon before them, instead of a single one (it's to distinguish them from pseudo-classes, like :hover).
One important thing with both the before and after pseudo elements is that they require us to define the content property. Without it, it defaults to none and, well, we can use it!
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@jacklee8446]

I wasn't prepared to be attacked by this masterpiece.

[@katriels8639]

I wasn't prepared to be attacked by the bright white background

[@lynscott6171]

LOL! Agreed.

[@SEALteam6Operator]

To which I was, indeed.

[@sid4827]

Same bruh , as a backend developer I used get irritatedly confuse bc of this, it's masterpiece indeed

[@RainOnline]

this guy is my life when it comes to understanding css syntaxes in a quick second

[@martefact]

I was an adobe certified trainer/developer with focus on html CSS and Dreamweaver between 1999 - 2016 ish years. I now code creatively. Your videos are outstanding!!! I do think your personality plays a huge part. But your love of the craft makes the learning experience a total buzz and joy. Wow man. Kudos to you. So glad i stumbled on your work. A gifted instructor ..Thank You.

[@bookwyrm4559]

He gotta be the greatest

[@mr.mikaeel6264]

When you told us that you did not want us to have similar struggles as you had with the images i could almost hear a curse being lifted and a part of you moving on freely finally again ^^

[@WolfieSilveira]

I've seen the before and after option pop op often when I code. Though never used it.. This definitely gave me some design ideas

[@KevinPowell]

Awesome! They are really handy for adding some nice flourishes without needing any extra markup :)

[@jutsuuchiha3858]

Still?

[@kashmirtechtv2948]

Yes

[@Steel0079]

@@KevinPowell Kevin, I have not been able to apply transitions to before and after pseudo classes. How to do it?

[@nashmiaadnan3560]

You're the most helpful CSS instructor out there! Thank you for simplifying complicated concepts so easily

[@anonymous_basics]

he introduce himself as the css king lol

As a singer, I use my page to promote my shows: I use ::before to show the words: "Next", "Tomorrow" and "Today" to highlight the next show, after I've assign such classes in JS depending on its date

[@dentheadgaming4400]

Hey, new coder here, thanks for clarifying this. I was so confused on this topic.

[@guanahtamar914]

same here, guessing you are not a new coder anymore lol.

[@alirezalatifi3565]

@@guanahtamar914 but i am. There are always some new coders :D

[@danielaguilera4782]

Same

[@aybmab2]

This was awesome!! I've always ignored these when looking at sample code with very little thought. Very informative.

[@p_o_z_e]

I've been a web dev student for around 2 months now, i just found your channel and your videos have helped me alot, thx for the awesome work!

[@rboy879]

I swear, been doing this web dev for a while and this guy always amazes me with the detail straightforward explanations. Nice!

[@JohnsonKongor]

As a beginner in full stack web development, this topic had given me some headache. At least you have helped me out. Thanks so much. Will always follow on to find out more....

[@bobdinitto]

Kevin, you're amazing. In the first three minutes you solved my problem! Thanks. Can't wait to watch the rest of the series.

[@charlotte.upandaway]

This was SO helpful! Thank you so much for this video series. Heading straight over to part two!!

[@firstlast6956]

New coder as well, was so lost when it came to the ::before and ::after pseudo-classes. I just thought people were using them for the hell of it. Now I know! Thanks KP.

[@d.bachmann6798]

Hello Kevin, Thanks a lot for taking time and making this video... short and concise explaining exactly what one needs to understand and even explaining what is not explained here and why and where you are elaborating on it... May you have blessing in your work David B. Israel

[@kite4792]

thanks for the taking the time to demonstrate the various examples, instead of just saying it. ❤️

[@ammarhassan_]

This is amazing explaination. I spend a week fighting with ::before and ::after and gave up until I find myself a good explanation and u to that job very well. Thanks

[@alvaronaranjo2589]

Love how the quality of your videos just keeps getting better

[@joshua_dlima]

I spent so long trying to figure out what does before and after actually do. Thank you so much, cleared out alot of doubts

[@kamoroso94]

I had the same confusion trying to use ::before on input elements. Thanks for noting this problem!

[@danielribeiro356]

Man, your videos are just amazing! What a simple way to explain those things! Congratulations!

[@chinmaymathur2430]

At first I was planning to skip the video but after watching, I came to know that I was doing the biggest mistake of skipping😢🙏🙏Thanku sooo very much🙏🙏

[@LokiDaFerret]

I love the fact that I learn something new from each and every one of your videos. This one included obviously. 👍

[@somnvm37]

This video is just great. I started to understand pseudo elements a long time ago with it. Now I forgot something, and it helped me a lot. Which makes it a very good video. SO, WILL GO YOU THIS: li:not(:last-child)::after {content:";"} li:last-child::after{content:"."} that code adds semi-colons to the end of each li, and dot to the end of the last one.

[@benzflynn]

Works too.

[@Andrea-lf3jq]

This was the most easy to understand explanation I have come across since starting to learn Web Development. Thank you!!

[@marksolon1874]

same here

[@djhonza1939]

Thank you from the bottom of my heart for simplifying this for me!! The best explanation ever!

[@jamesbowdren7237]

After I finish any lesson about Css I immediately look for a video from you to help me better understand the subject matter. Thanks for helping me become a better developer.

[@silksong7277]

THANK YOU! This was so helpful! I will be checking out more of your videos! You explained this concept so well!

[@SazikimiJaeger]

This is the 2nd video I watched and then? Subscribed. Awesome explanation and with also clear examples. Before this, I saw at lots of places those" before" and "after" pseudo stuff but I didn't understand. Now I did. And just when I needed. Thanks Dude. You're freaking awesome. Your channel deserves more attention.

[@KevinPowell]

So glad that the video was able to help, and thanks for subscribing! Also, thank you so much for the kind words 😊

[@jasonshere]

I'm a new viewer (and subscriber) and I just wanted to say that I appreciate your professionalism and expert knowledge, that even present in your lessons 4 years ago. Thanks for pointing out :: vs :

[@KevinPowell]

Welcome aboard!

[@mcx6629]

Wow , before and after was driving me nuts because I was using it without knowing why, now it is all starting to make more sense!

[@thiagoterceiro9902]

Really great stuff Kevin! Keep at it!

[@hossesarse]

5:58 Beware the wrath of a patient man... when a Canadian says the word "hell", you know he was supremely frustrated.

[@salimal-tarsha5564]

I never get bored watching you Kevin thanks for sharing

[@abishkarkarki268]

5 years and still helpful thank you

[@itameio6161]

Thank you for the video, Kevin. This really was well-explained and helpful.

[@JR-em2hn]

Very simple and useful explanation! Thanks Kevin!

[@hoangtronglap2015]

Definitely love your tutorials, Kevin!

[@Furki4_4]

these were one of the most mystic elements for me, thank you for the explanation ! going to next video...

[@Stevenbustamento]

Im binge watching your whole channel and I love it. Thank you.

[@evergreen7781]

Finally understood what these are !!! Thanks Kevin, you are really a CSS master !!!

[@tankvoid]

Thank you, thank you, so, so much! I was so confused about this until I stumbled upon your video. You explained it masterfully. I really appreciate it!

[@candicelitteral1954]

Thanks for clarifying this subject!

[@elkhanhamet2561]

Thanks a million Kevin!!! Whooa what an eye opener. Made so much sense and made me realize how to make it useful. Thanks again man, for videos. Take care.

[@jaydenmoon1165]

Wonderful explanation - the power of before and after is so much fun to play with :D

[@dharmeshprajapati5428]

Best video on before and after so far.

[@chlobdya3756]

Thanks kevin for clearing the confusion!!

[@sivasanthosh9610]

Thank you bro, now I get the clarity about ::before and ::after

[@almostworthy2973]

This is a game-changer!!! Thank you, Sir!!

[@anjirnoor950]

Hello sir. I'm awfully thankful to you for all the knowledge I've learned from u ... appreciate your efforts very much. Ur tutorials r always properly explained and just so easy to understand. looking forward to a lot more of your awesome tutorials.

[@SteveSmith-jc7pc]

Great simple and clear explanation. Thanks.

[@kopilkaiser8991]

Thank you for sharing with us your knowledge. This helped me to clear my confusion on pseudo elems and helpes me to understand the topic better 😊

[@CazCreates]

This is really useful, thanks Kevin!

[@footballskills6574]

OMG you are incredible I was looking for this and I can't leave this channel without subscribing !!

[@TheNarancia]

Thank you for this content. It is so clear! You know, I'm from Pisa, and when I saw the tower appears on screen I started to laugh :)

[@hectornash1323]

Yo man! I just randomly clicked your video for some explanation and now I’ll totally subscribe to your channel, nice content ! Keep it up!

[@10760910eugenioyoutu]

Thank you Kevin, nice tutorial, very objective, goes to the point !!

[@ThiagoAdomaitis]

Thank you for this video, Kevin! And as almost anyone else here, I also thought that ::before and ::after would create a new HTML thing in respective position.

[@DaveMcGarry]

How have I never noticed it's before the content but within the element itself! I've been using this for years too... Always good to learn new stuff thanks Kevin

[@KevinPowell]

I thought the same thing forever too David. I forget when I realized that it didn't work that way. With the way we use them (and how they are named), it just makes sense that they'd be before and after the element itself. Makes it easier to use that it isn't though :).

[@EduardoOliveira77]

Finally I understood how the pseudo elements works. Thanks!

[@IntlStudentStorytime]

Thank you Kevin, you are a blessing

[@stavroskefaleas6320]

Best explanation of this topic on the whole Internet!!!

[@sujeetagrahari2292]

There are lot of people teaching CSS on youtube and Udemy. But truly anyone knows and understands it; it's you. "If you can't explain something; you don't know it well" and opposite is true for you.

[@BalakishanGundi]

Dear Kevin! You are a wonderful teacher! Thank you!

[@nathancornwell1455]

So, actually for pseudo elements on Images, a great use case for them would be if for some reason the image failed then the pseudo element would actually show. So , instead of seeing the broken image placeholder or just the alt text , you could have something in the content property that you want displayed instead .

[@kinstar]

God why has it taken me this long to learn this properly. Thanks again!!!

[@00el04]

Amazing tutorial Kevin!

[@ElTsakoss]

you are one of the best web dev tutors in this platform

[@indieNik]

Thank you Kevin. Was really waiting for these concepts :)

[@KevinPowell]

No problem at all, glad you liked it!

[@RockstahRolln]

Terrific video!! Finally understood what these are!

[@armorinformationtechnology7309]

Another good one, Kevin, thanks!

[@FordExplorer-rm6ew]

Your stuff has taught me alot. Been about 2 years since I've been watching

[@KevinPowell]

Thanks for sticking around for so long :D

[@georgetomeh8898]

Thanks Kevin, great explanation

[@TanishqSharma]

Simple & effective, Kevin. Cheers.

[@jcpartri]

Great video! Clear, understandable, even inspiring. Thank you for making this. I learned something today. - Many blessings.

[@KevinPowell]

So happy to hear that John!

[@rubhan94]

This helped a lot! I was having a bit of trouble wrapping my mind around pseudo classes and elements, and this answered quite a few questions I had. :D

[@KevinPowell]

So glad to hear that it helped clear things up! Very happy to help 👍

[@rubhan94]

Seriously I appreciate your content! :D I'm also glad you replied because I realized now that I forgot to subscribe to your channel xD Currently doing a 2-year front end developer course online. Think I'll get a lot out of your videos, we use Lynda but those tutorials often gets too dry and boring.

[@paulsonstechpoint773]

Very clear and precise explanation. I like this!!!

[@JessLord1]

This was so helpful, thank you very much.

[@seanpheneger6632]

Thanks for the little gem about images not being able to utilize the sudo elements, it's these little extras that I love with your videos

[@KevinPowell]

Haha, I had to share that, I spend *so* much time trying to figure out why it wasn't working, lol.

[@markkfitx]

Found your channel and was like... JACKPOT! definitely subscribed

[@GauravSingh-sv5cw]

wow! This makes so many things easier!! Thank you Kevin!!

[@lamyabenammar3050]

simple and informative, THANKS!

[@Vxortex]

But still able to explain each stage in a basic manner. Honestly thanks man!

[@darpananeja4751]

Very nice video!! Really cool stuff, you taught there

[@Encysted]

5:07 It’s been a few years, but it’s worth adding that is a void element, like and , all of which seem to “ignore” ::before and ::after

[@RahulSharma-ox6se]

Awesome video, Kevin!!!

[@fullstackgreekdeveloper8033]

This explanation is simply awesome!

[@mahmudulislammaruf9405]

Easily understood. Thank you!

[@ckernest]

very clear and precise explanation.

[@codervince4957]

Very easy to understand! Thanks a lot!

[@martakay4602]

Amazing, I am so happy I came across this. Thank you

[@muntadheralnoor8365]

I like your videos Kevin, very clear to understand and I benefit a a lot from this channel .

[@KevinPowell]

Glad to hear that Alibadi!

[@user-qz4rp4ie7x]

Amazing! Very clear explanation!

[@RockstahRolln]

Terrific video! I FINALLY understood these pseudo elements. Thank You!

[@KevinPowell]

Awesome!

[@kalebgobert8293]

Extremely helpful video. Thanks

[@franciscobarria3647]

Great intro to before & after, been using them like a noob

[@marcelvanlierop]

Hi Kevin. Great video. Looking forward to the other ones!

[@KevinPowell]

Thanks, Marcel, glad you liked it :)

[@radomirmijovic2605]

Thanks Kevin, this is great!

[@tylercode2207]

You are great G!...your videos help a lot!..Keep going!