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

  Переглядів 1,073,746

Kevin Powell

Kevin Powell

6 років тому

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 UKposts channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

КОМЕНТАРІ: 769
@jacklee8446
@jacklee8446 3 роки тому
I wasn't prepared to be attacked by this masterpiece.
@katriels8639
@katriels8639 2 роки тому
I wasn't prepared to be attacked by the bright white background
@lynscott6171
@lynscott6171 2 роки тому
LOL! Agreed.
@SEALteam6Operator
@SEALteam6Operator 2 роки тому
To which I was, indeed.
@sid4827
@sid4827 2 роки тому
Same bruh , as a backend developer I used get irritatedly confuse bc of this, it's masterpiece indeed
@RainOnline
@RainOnline 4 роки тому
this guy is my life when it comes to understanding css syntaxes in a quick second
@martefact
@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
@bookwyrm4559 Рік тому
He gotta be the greatest
@mr.mikaeel6264
@mr.mikaeel6264 3 роки тому
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 ^^
@nashmiaadnan3560
@nashmiaadnan3560 2 роки тому
You're the most helpful CSS instructor out there! Thank you for simplifying complicated concepts so easily
@anonymous_basics
@anonymous_basics Рік тому
he introduce himself as the css king lol
@aybmab2
@aybmab2 5 років тому
This was awesome!! I've always ignored these when looking at sample code with very little thought. Very informative.
@dentheadgaming4400
@dentheadgaming4400 3 роки тому
Hey, new coder here, thanks for clarifying this. I was so confused on this topic.
@guanahtamar914
@guanahtamar914 2 роки тому
same here, guessing you are not a new coder anymore lol.
@alirezalatifi3565
@alirezalatifi3565 2 роки тому
@@guanahtamar914 but i am. There are always some new coders :D
@danielaguilera4782
@danielaguilera4782 2 роки тому
Same
@JohnsonKongor
@JohnsonKongor 4 роки тому
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....
3 роки тому
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
@p_o_z_e
@p_o_z_e 4 роки тому
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!
@WolfieSilveira
@WolfieSilveira 6 років тому
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
@KevinPowell 6 років тому
Awesome! They are really handy for adding some nice flourishes without needing any extra markup :)
@jutsuuchiha3858
@jutsuuchiha3858 4 роки тому
Still?
@kashmirtechtv2948
@kashmirtechtv2948 3 роки тому
Yes
@Steel0079
@Steel0079 2 роки тому
@@KevinPowell Kevin, I have not been able to apply transitions to before and after pseudo classes. How to do it?
@bobdinitto
@bobdinitto 2 роки тому
Kevin, you're amazing. In the first three minutes you solved my problem! Thanks. Can't wait to watch the rest of the series.
@kamoroso94
@kamoroso94 5 років тому
I had the same confusion trying to use ::before on input elements. Thanks for noting this problem!
@charlotte.upandaway
@charlotte.upandaway 3 роки тому
This was SO helpful! Thank you so much for this video series. Heading straight over to part two!!
@kite4792
@kite4792 5 років тому
thanks for the taking the time to demonstrate the various examples, instead of just saying it. ❤️
@rboy879
@rboy879 2 роки тому
I swear, been doing this web dev for a while and this guy always amazes me with the detail straightforward explanations. Nice!
@d.bachmann6798
@d.bachmann6798 4 роки тому
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
@ammarhassan_
@ammarhassan_ 5 років тому
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
@joshua_dlima
@joshua_dlima 4 роки тому
I spent so long trying to figure out what does before and after actually do. Thank you so much, cleared out alot of doubts
@LokiDaFerret
@LokiDaFerret 3 роки тому
I love the fact that I learn something new from each and every one of your videos. This one included obviously. 👍
@danielribeiro356
@danielribeiro356 Рік тому
Man, your videos are just amazing! What a simple way to explain those things! Congratulations!
@jamesbowdren7237
@jamesbowdren7237 2 роки тому
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.
@djhonza1939
@djhonza1939 Рік тому
Thank you from the bottom of my heart for simplifying this for me!! The best explanation ever!
@alvaronaranjo2589
@alvaronaranjo2589 Рік тому
Love how the quality of your videos just keeps getting better
@firstlast6956
@firstlast6956 3 роки тому
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.
@Andrea-lf3jq
@Andrea-lf3jq 4 роки тому
This was the most easy to understand explanation I have come across since starting to learn Web Development. Thank you!!
@marksolon1874
@marksolon1874 4 роки тому
same here
@salimal-tarsha5564
@salimal-tarsha5564 Рік тому
I never get bored watching you Kevin thanks for sharing
@abishkarkarki268
@abishkarkarki268 Рік тому
5 years and still helpful thank you
@anjirnoor950
@anjirnoor950 3 роки тому
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.
@silksong7277
@silksong7277 3 роки тому
THANK YOU! This was so helpful! I will be checking out more of your videos! You explained this concept so well!
@sivasanthosh9610
@sivasanthosh9610 5 років тому
Thank you bro, now I get the clarity about ::before and ::after
@tankvoid
@tankvoid 2 роки тому
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!
@hoangtronglap2015
@hoangtronglap2015 4 роки тому
Definitely love your tutorials, Kevin!
@itameio6161
@itameio6161 2 роки тому
Thank you for the video, Kevin. This really was well-explained and helpful.
@chlobdya3756
@chlobdya3756 4 роки тому
Thanks kevin for clearing the confusion!!
@evergreen7781
@evergreen7781 3 роки тому
Finally understood what these are !!! Thanks Kevin, you are really a CSS master !!!
@almostworthy2973
@almostworthy2973 4 роки тому
This is a game-changer!!! Thank you, Sir!!
@thiagoterceiro9902
@thiagoterceiro9902 4 роки тому
Really great stuff Kevin! Keep at it!
@SazikimiJaeger
@SazikimiJaeger 6 років тому
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
@KevinPowell 6 років тому
So glad that the video was able to help, and thanks for subscribing! Also, thank you so much for the kind words 😊
@elkhanhamet2561
@elkhanhamet2561 3 роки тому
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.
@ThiagoAdomaitis
@ThiagoAdomaitis 3 роки тому
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.
@FordExplorer-rm6ew
@FordExplorer-rm6ew 4 роки тому
Your stuff has taught me alot. Been about 2 years since I've been watching
@KevinPowell
@KevinPowell 4 роки тому
Thanks for sticking around for so long :D
@mcx6629
@mcx6629 4 роки тому
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!
@Furki4_4
@Furki4_4 Рік тому
these were one of the most mystic elements for me, thank you for the explanation ! going to next video...
@geekatari4391
@geekatari4391 6 років тому
Excelente work! I am retaking web design and this clarifies a lot. Thank you for a short and informative video.
@KevinPowell
@KevinPowell 6 років тому
Glad to hear that it helped!
@dharmeshprajapati5428
@dharmeshprajapati5428 2 роки тому
Best video on before and after so far.
@EduardoOliveira77
@EduardoOliveira77 11 місяців тому
Finally I understood how the pseudo elements works. Thanks!
@jasonshere
@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
@KevinPowell Рік тому
Welcome aboard!
@jaydenmoon1165
@jaydenmoon1165 3 роки тому
Wonderful explanation - the power of before and after is so much fun to play with :D
@Stevenbustamento
@Stevenbustamento 5 років тому
Im binge watching your whole channel and I love it. Thank you.
@TheNarancia
@TheNarancia 3 роки тому
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 :)
@rubhan94
@rubhan94 6 років тому
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
@KevinPowell 6 років тому
So glad to hear that it helped clear things up! Very happy to help 👍
@rubhan94
@rubhan94 6 років тому
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.
@hectornash1323
@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!
@ElTsakoss
@ElTsakoss 3 роки тому
you are one of the best web dev tutors in this platform
@10760910eugenioyoutu
@10760910eugenioyoutu 4 роки тому
Thank you Kevin, nice tutorial, very objective, goes to the point !!
@BalakishanGundi
@BalakishanGundi 3 роки тому
Dear Kevin! You are a wonderful teacher! Thank you!
@candicelitteral1954
@candicelitteral1954 2 роки тому
Thanks for clarifying this subject!
@Horoe
@Horoe 4 роки тому
wow this is amazing! I am defo becoming a programmer now! when I found out your channel even better than design course
@kopilkaiser8991
@kopilkaiser8991 4 місяці тому
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 😊
@marcelvanlierop
@marcelvanlierop 6 років тому
Hi Kevin. Great video. Looking forward to the other ones!
@KevinPowell
@KevinPowell 6 років тому
Thanks, Marcel, glad you liked it :)
@seanpheneger6632
@seanpheneger6632 6 років тому
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
@KevinPowell 6 років тому
Haha, I had to share that, I spend *so* much time trying to figure out why it wasn't working, lol.
@IntlStudentStorytime
@IntlStudentStorytime Рік тому
Thank you Kevin, you are a blessing
@footballskills6574
@footballskills6574 2 роки тому
OMG you are incredible I was looking for this and I can't leave this channel without subscribing !!
@somnvm37
@somnvm37 3 роки тому
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
@benzflynn 3 роки тому
Works too.
@00el04
@00el04 3 роки тому
Amazing tutorial Kevin!
@DaveMcGarry
@DaveMcGarry 6 років тому
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
@KevinPowell 6 років тому
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 :).
@kinstar
@kinstar Рік тому
God why has it taken me this long to learn this properly. Thanks again!!!
@JR-em2hn
@JR-em2hn 4 роки тому
Very simple and useful explanation! Thanks Kevin!
@indieNik
@indieNik 6 років тому
Thank you Kevin. Was really waiting for these concepts :)
@KevinPowell
@KevinPowell 6 років тому
No problem at all, glad you liked it!
@markkfitx
@markkfitx 3 роки тому
Found your channel and was like... JACKPOT! definitely subscribed
@stavroskefaleas6320
@stavroskefaleas6320 2 роки тому
Best explanation of this topic on the whole Internet!!!
@vinaykotturi1283
@vinaykotturi1283 3 роки тому
This video is amazing your explanation was great. all of my confusion was gone after watched this video.
@nathancornwell1455
@nathancornwell1455 3 роки тому
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 .
@JeraldJamesCapao
@JeraldJamesCapao 5 років тому
Thank you Kevin. Now i understand what is the use of these pseudo-classes. ++++
@jcpartri
@jcpartri 5 років тому
Great video! Clear, understandable, even inspiring. Thank you for making this. I learned something today. - Many blessings.
@KevinPowell
@KevinPowell 5 років тому
So happy to hear that John!
@dennyd2724
@dennyd2724 5 років тому
Thnkyou!!! I had them misstood after few experiments for layers. So clear video! Doing codelearning on freecodecamp. You're amazing! You done the padding, margin also with so a perfect explaining. "After me struggle with it for over 2half months" Thnkyou!! Great content!
@TanishqSharma
@TanishqSharma 4 роки тому
Simple & effective, Kevin. Cheers.
@idowebwork
@idowebwork 2 роки тому
Love the before and after pseudo elements.
@GauravSingh-sv5cw
@GauravSingh-sv5cw 3 роки тому
wow! This makes so many things easier!! Thank you Kevin!!
@NikolaZagorac
@NikolaZagorac 5 років тому
Thanks for clearing this up!
@user-qz4rp4ie7x
@user-qz4rp4ie7x 5 років тому
Amazing! Very clear explanation!
@giaccommander7474
@giaccommander7474 5 років тому
I am new to Webdesign .... never cared about ::after nor ::before .... nice subject selection on the video, Thanks
@ckernest
@ckernest 5 років тому
very clear and precise explanation.
@789tridente
@789tridente Рік тому
this is truly a before and after in my css
@martakay4602
@martakay4602 3 роки тому
Amazing, I am so happy I came across this. Thank you
@georgetomeh8898
@georgetomeh8898 2 роки тому
Thanks Kevin, great explanation
@Vxortex
@Vxortex Рік тому
But still able to explain each stage in a basic manner. Honestly thanks man!
@ishworgautam9717
@ishworgautam9717 3 роки тому
I haven't understand fora week. Suddenly video pop out my UKposts. Totally understand. Keep giving this kind of content,🎈
@blacklotus1606
@blacklotus1606 5 років тому
wow, some cool knowledge you gave. keep up the good work
@SteveSmith-jc7pc
@SteveSmith-jc7pc 3 роки тому
Great simple and clear explanation. Thanks.
@fullstackgreekdeveloper8033
@fullstackgreekdeveloper8033 3 роки тому
This explanation is simply awesome!
@Born2DoubleUp
@Born2DoubleUp 2 роки тому
I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙
@RockstahRolln
@RockstahRolln 4 роки тому
Terrific video!! Finally understood what these are!
@CazCreates
@CazCreates Рік тому
This is really useful, thanks Kevin!
@naziruadam3950
@naziruadam3950 4 роки тому
Thanks for clearing my misconception.
@paulsonstechpoint773
@paulsonstechpoint773 3 роки тому
Very clear and precise explanation. I like this!!!
@mohammadali-fd3xd
@mohammadali-fd3xd 4 роки тому
Your explanation is always awesome.
@lamyabenammar3050
@lamyabenammar3050 Рік тому
simple and informative, THANKS!
@smakaev
@smakaev Рік тому
thanks so much, was really stuck with gradient button border only on hover problem. helped a lot
@ADEPRINCEISMAIL
@ADEPRINCEISMAIL 2 роки тому
Thanks for this, it was really helpful in clearifying the usage
The new CSS pseudo-classes explained - :is() :where() :has()
13:50
Kevin Powell
Переглядів 128 тис.
How did CatNap end up in Luca cartoon?🙀
00:16
LOL
Переглядів 5 млн
Can You Draw The PERFECT Circle?
00:57
Stokes Twins
Переглядів 43 млн
Эффект Карбонаро и пончики
01:01
История одного вокалиста
Переглядів 8 млн
How to Fix Audio Lag / Delay on  Stream labs OBS
1:34
Login Helps - How to Tutorial
Переглядів 10
You might not need useEffect() ...
21:45
Academind
Переглядів 132 тис.
Learn CSS Position In 9 Minutes
9:26
Web Dev Simplified
Переглядів 1,9 млн
I've been challenged to a CSS BATTLE by Web Dev Simplified
42:22
Kevin Powell
Переглядів 946 тис.
23 CSS features you should know (and be using) by now
31:31
Kevin Powell
Переглядів 48 тис.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Переглядів 318 тис.
The secret to mastering CSS layouts
17:11
Kevin Powell
Переглядів 261 тис.
Learn CSS pseudo elements in 4 minutes 🔎
4:49
Bro Code
Переглядів 22 тис.
Are you using the right CSS units?
6:30
Kevin Powell
Переглядів 437 тис.
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Переглядів 394 тис.
How did CatNap end up in Luca cartoon?🙀
00:16
LOL
Переглядів 5 млн