HomeОбразованиеRelated VideosMore From: Kevin Powell

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

2722 ratings | 78008 views
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: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Html code for embedding videos on your blog
Text Comments (185)
Umair Riaz Ahmed (1 day ago)
Greate video Can we add link by using after before class ?
Kevin Powell (17 hours ago)
I don't think so? But I could be wrong here.
Amit Kumar Jajoo (8 days ago)
Thx
grn emp (12 days ago)
Are you Elon Musk?
Kevin Powell (8 days ago)
Haha, if only I had a fraction of his bank account, lol
mo swilam (11 days ago)
yeah he is the CSS world Elon Musk
srikanth KARRA (12 days ago)
Thanks Kevin ..
BlueIceAce (14 days ago)
So awesome!
A Coder's Hangout (16 days ago)
Great tutorial. Which font are you using on codepen by the way?
Sabbir Ahmed (17 days ago)
Take a deep breath.
Kevin Powell (17 days ago)
Haha, definitely need to remember to do that from time to time
Tolumide (19 days ago)
Great video, big fan!!
Kevin Powell (19 days ago)
Thanks Tolumide!
Rachana Prakash (22 days ago)
very simple! thank you! :)
Kevin Powell (22 days ago)
No problem, I'm glad you liked it :)
Martha Fontelera (24 days ago)
YOUR. VIDEOS. ARE. THE. BEST.
Kevin Powell (23 days ago)
Thanks so much!
neil kumar (27 days ago)
All is awesome but why you used body"display:flex"; Can u explain it🤔
neil kumar (26 days ago)
Thank you my angel.
Kevin Powell (26 days ago)
It was just to center everything in my demo file :). I have a short series that looks at flexbox if your interested!
Arend Estes (27 days ago)
Your videos are great.
chandrakant sarvaiya (1 month ago)
the great
Kevin Powell (1 month ago)
Thanks :D
Люся Пауль (1 month ago)
nice
Vida Moayedi (1 month ago)
Very nice video! Thank you so much!
Kevin Powell (1 month ago)
No problem, glad you enjoyed it!
ghazanfar malik (1 month ago)
Great ! 👍🏻
Angel Batista (1 month ago)
This was awesome!! I've always ignored these when looking at sample code with very little thought. Very informative.
Vitaliy Dakhnovets (1 month ago)
Excellent explanation. Thanks!
Blah Blah (1 month ago)
Using before and after with an image... Wrap the image in a div and apply the pseudo elements to the div.
Kevin Powell (1 month ago)
That would work, but sort of defeats the purpose in a way. But if you need it on a bunch of images, it might be the best option
Dustin Horning (1 month ago)
I'm a full stack. Sometimes we don't get all the design memos. I just happened to notice your video in the suggestions and you had me at p::before.... This is really helpful! I've used "before" and "after" when I'm solving problems based on internet suggestions, but i really had no idea what i was doing expect making styles "before" and "after" So thanks for making this! Very helpful!
Kevin Powell (1 month ago)
So glad to hear that this helped Dustin!
Prathamesh Sawant (1 month ago)
Best best explanation. Thank you very much.
Shandy Sulen (2 months ago)
Barbara Kruger would be both proud and unhappy with your design choice
Kevin Powell (2 months ago)
Not enough helvetica? 😁
Abdurrahman Hafez (2 months ago)
The simple the best Thanks
Sobeida Lagrange (2 months ago)
Awesome!!!
Kevin Powell (2 months ago)
https://youtu.be/xoRbkm8XgfQ
Sobeida Lagrange (2 months ago)
Where is part 2?
Adalwolf Connor (2 months ago)
wow, some cool knowledge you gave. keep up the good work
Thế Sơn (2 months ago)
I'm from Viet Nam. thank you very much !
Scott Anderson (2 months ago)
great video - looking forward to the rest in series --- more css! thanks!
Tom Scharstein II (2 months ago)
Thank you!
Kevin Powell (2 months ago)
You're welcome 😁
Marlee G (2 months ago)
Thank you!
Kevin Powell (2 months ago)
No problem!
jam (2 months ago)
Thanks you so much !!😉
Drunk Frog (2 months ago)
Awesome!!!!!!!!!!!
RedMikePumpkin (2 months ago)
This is the ::before part of the series
Kevin Powell (2 months ago)
😂
Akash Kumar Seth (2 months ago)
Thanks a lot. Very good explanation.
Gilles (3 months ago)
Nice vid, are you canadian?
Kevin Powell (2 months ago)
I am! 🇨🇦
How align middle the before and after with the text? For example ::b and ::f font-size 10 and p font -size 50 and all aling middle like table
Kevin Powell (2 months ago)
I think I do that in one of the future visors of this series! Do you want the before and after text in the top and bottom of the paragraph, or in the sides?
BALMOS (3 months ago)
Wow
Gábor Kákonyi (3 months ago)
Just...Thank you:)
Kevin Powell (3 months ago)
You're welcome :D
Usman Zill (3 months ago)
can you please tell how do I do that like when I "scroll down" the content page it never shows again in the webpage like in this website http://we3.jam3.com
Kevin Powell (3 months ago)
Some sort of JavaScript trickery going on there :)
Usman Zill (3 months ago)
Thanks!!!
Technically Geckley (3 months ago)
A+ Very informative. Well paced. Easy to read.
Abishek Koirala (3 months ago)
Is this not the same like jquery's prepend() and append() methods?
Kevin Powell (3 months ago)
Sort of similar, but nice to be able to do it without any JS!
Kyle Amoroso (3 months ago)
I had the same confusion trying to use ::before on input elements. Thanks for noting this problem!
AdiL IsmaiL (3 months ago)
What is content?
Kevin Powell (3 months ago)
If you were to put something in 'content', then that content would populate the pseudo element, but for the pseudo element to "exist" it needs content, even if that content is empty.
Haley Mock (3 months ago)
Issue. Codepen is not displaying the elements if you leave the content selector blank. Content: ' '; Shows nothing. But when I add Content: Hi; the text and the block element show up.
Kevin Powell (3 months ago)
Are you either giving them a position: absolute, or a display: block?
Ahmed Abdo (3 months ago)
Please make a lesson about the float of imgs and divs specailly the fix of it to prevent the float object get around the other object.
Kevin Powell (3 months ago)
I don't really use floats very often anymore! I use grid for most work now, and if browser support is an issue, then flexbox. It sounds like the issue might be needing a clearfix in your situation, so you could look that up, CSS tricks has some good articles on it.
Ahmed Abdo (3 months ago)
Amazing! Very clear explanation!
ms raju (3 months ago)
great ..
udara kasun (3 months ago)
Perfect 👍
Mohamed Ghouse (3 months ago)
Thank you
David Martín Vergués (3 months ago)
good video! thx!
john partridge (3 months ago)
Great video! Clear, understandable, even inspiring. Thank you for making this. I learned something today. - Many blessings.
Kevin Powell (3 months ago)
So happy to hear that John!
Jerald James Capao (3 months ago)
Thank you Kevin. Now i understand what is the use of these pseudo-classes. ++++
Karunakar (3 months ago)
Thank you. It helped me a lot. Good to know pseudo elements doesnot work on images...!
Kevin Powell (3 months ago)
Very glad to hear it helped!
audiocologne (3 months ago)
Great, thank you!
Kevin Powell (3 months ago)
No problem :D
kevin rosario (4 months ago)
hello kevin
Kevin Powell (4 months ago)
hello kevin ;)
Said Al Kharusi (4 months ago)
You're a legend!
Kevin Powell (4 months ago)
Thanks!
Ruben Hansen (4 months ago)
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
Ruben Hansen (4 months ago)
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.
Kevin Powell (4 months ago)
So glad to hear that it helped clear things up! Very happy to help 👍
vinay joseph (4 months ago)
well explained
Kevin Powell (4 months ago)
Thanks!
Adam Youssef (4 months ago)
Hey! another great tutorial! Thanks mate!
Kevin Powell (4 months ago)
Glad you liked it Adam!
lardosian (4 months ago)
Thanks Kevin, thats a big help.
Kevin Powell (4 months ago)
No problem at all, glad you liked it :)
Murtaza Ali (4 months ago)
I like your videos Kevin, very clear to understand and I benefit a a lot from this channel .
Kevin Powell (4 months ago)
Glad to hear that Alibadi!
Aremo (4 months ago)
please what's the name of the extension you use to make dev tools dark...thanks
Kevin Powell (4 months ago)
It's the default for Firefox Nightly :)
SEENNN UN (4 months ago)
actually it works in my browser.. the img before and after
Kevin Powell (4 months ago)
Normally it would only work on broken images (in some browsers...). Which browser are you using?
Kris Pham (4 months ago)
Hi Kevin. Glad I found your channel. Thanks a lot for this series and the great explanation. But could you please, if it not bother you. Can you slow down a bit so that I can keep up? You talk too fast for me, sometimes.
Kevin Powell (4 months ago)
Really sorry about that. You're not the first to mention it, and u try to keep it in mind, but sometimes I get carried away. Worst case you can hit the settings and change the speed to slow it down, but I'll try to keep it in mind more!
Christine Salazar (4 months ago)
Thank you so much this is a very great video.. <3 <3 I understand now the used of before and after. Thank you <3
Kevin Powell (4 months ago)
So happy to hear that Christine, really glad I was able to help out 😁
xmisato (5 months ago)
This was an excellent video. Thanks so much! Subbing :)
Kevin Powell (5 months ago)
Thanks so much for the sub xmisato, glad you liked the video :)
A-R-S (5 months ago)
Subscribed 👍🏽👍🏽👍🏽
Kevin Powell (5 months ago)
Thanks for subbing Alex!
Abdul Roshan (5 months ago)
Great video and Subscribed.,. thank you.
Kevin Powell (5 months ago)
Thanks a lot for the sub, and glad you liked the video :D
Wanderson Santos Costa (5 months ago)
Yes, that image thing is really something, I had to learn that the heard way... Haha oh well! Anyhow, great video tho.
Kevin Powell (5 months ago)
I did just learn recently that because of how browsers render broken images, you can have pseudo-elements on those! In some browsers anyway... so strange, hah. But yes, with normal images I learned the hard way as well!
ussardor (5 months ago)
Good Job.
Kevin Powell (5 months ago)
Thanks :D
rickyu1978 (5 months ago)
how is browser support for css content?
Kevin Powell (5 months ago)
Pretty universal, going pretty far back. IE8 only supports the ::before and ::after with a single colon (so, :before and :after, which is non-standard now), so if you need support that far back, it is possible :). There should be no issue at all in using psuedo-elements today at all. Where you can get in trouble is if you want to transition or animate the pseudeo elements, as not all browsers support that (namely IE and Safari)
Roronoa Sazzed (6 months ago)
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.
Kevin Powell (6 months ago)
So glad that the video was able to help, and thanks for subscribing! Also, thank you so much for the kind words 😊
Kevin Meinrad (6 months ago)
Thanks for this easy explanation.
Kevin Powell (6 months ago)
Thanks Kevin! Also, you've got a great name 😛
islam messaadi (6 months ago)
Thank you Kevin great video ^^ !!
Kevin Powell (6 months ago)
No problem!!
Sopanha Brian (7 months ago)
thanks
Kevin Powell (7 months ago)
Glad you liked it :)
Kellie Podsednik (7 months ago)
This was sooooo helpful!!!!
Kevin Powell (7 months ago)
Glad to hear that Kellie :)
Magnus Fohlström (7 months ago)
Great videos you do, thanks for teaching me awesome stuff.. So - Where do i find the video that explains ''content:' property???..
Kevin Powell (7 months ago)
Glad you liked it! You can find the content one here https://youtu.be/xoRbkm8XgfQ
jim dart (7 months ago)
Kevin, hello . Thanks for the explanations on how these work. This is what is needed on YouTube, how it works and why, plus the other things that can be done. I for one need to know how things work and not just put this here or there. Once again thank you. I also think you will be resposible for creating some awsome developers and designers. Have a good day a
Kevin Powell (7 months ago)
Thanks Jim! I really agree, I've seen too many videos that clearly have the finished code off-camera, and they just type everything in and it works perfectly, with no real explanations. It's not how someone does it, but WHY they do it that matters most. One of the reasons I started this channel :).
THE 4 MINUTES PROCESS (7 months ago)
Thanks Kevin. Really Appreciate it
Kevin Powell (7 months ago)
No problem :D
DEvops D (7 months ago)
Hi kevin ,im currently building a web application is it k to build using django. Or else please help me what kind of frame work to use My emai id:[email protected]
Kevin Powell (7 months ago)
Can't help a ton on this, it's not something I've really dove into. React and Vue both are the trendy JS frameworks at the moment though.
nick woodward (7 months ago)
the answer was no, I hadn't subscribed.... problem solved. looking forward to watching your stuff!
Kevin Powell (7 months ago)
Awesome, thanks for subbing Nick, glad you liked the video :)
Vazgen Sargsian (7 months ago)
👍👍👍👍
GomaAburaToShio (7 months ago)
Thank you this was very helpful!
Kevin Powell (7 months ago)
Great to hear, glad it helped
NepalCode TV (8 months ago)
How your console log is in dark theme?? is it due to code pen or ?
Mauricio Paternina (4 months ago)
If you refer to Chrome, there's a dark theme you can select.
Kevin Powell (7 months ago)
That's the dev tools from Firefox nightly :)
Xyrvee (8 months ago)
We need to make a website as a school project and I'm glad to have your tutorials! Our teacher doesn't know anything about this cool stuff... He doesn't know what css is and he is teaching html for many years now.
Xyrvee (8 months ago)
I guess no. Thank you very much and keep this great work going!
Kevin Powell (8 months ago)
Oh no! I guess he isn't open to changing his methods at this point? There are ways of keeping it simple! Anyway, I'm glad that my videos have helped you out, I'm sure your project will kick some ass!
Xyrvee (8 months ago)
Yes he is
Kevin Powell (8 months ago)
How does he teach html without CSS? Please don't tell me he's teaching tables for layout 😨
Rahber Gadehi (8 months ago)
Great
Kevin Powell (8 months ago)
Thanks!
Youssef Elmajbri (8 months ago)
Thank you Kevin, I've wating for you to make this video.. now I can't wait to watch next two videos about pseudo element. Really, I use to use :before instead of ::before and now I know why I should use :: before. Thank you again 😊
Kevin Powell (8 months ago)
No problem Youssef, glad you liked it!
Amir Shakiba (8 months ago)
Thanks a lot Kevin. That was awesome. So you said that we can't have pseudo elements for <img>, but what about inputs?
Shaurya Shubham (8 months ago)
What if you close a tag like img. <img src="url"> </img> Will ::before and ::after work then ?
Kevin Powell (8 months ago)
I think for anything that's self-closing, it won't work, since the element is the content itself. I just did a quick test and it seems to be the same.
RockstahRolln (8 months ago)
Terrific video! I FINALLY understood these pseudo elements. Thank You!
Kevin Powell (8 months ago)
Awesome!
Stevie Wonder (8 months ago)
Thanks Kevin, loving these videos!
Kevin Powell (8 months ago)
No problem Stephen, glad you liked it!
Madelaine Thomsen (8 months ago)
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
Kevin Powell (8 months ago)
Awesome! They are really handy for adding some nice flourishes without needing any extra markup :)
Muhammad Adnan (8 months ago)
Great
Kevin Powell (8 months ago)
Thanks :)
Muhammad Adnan (8 months ago)
Hi sir. ... pleassssssssse smoothstate.js plugin..... page to page transition without load. .... make video on it please ASAP. ...
Muhammad Adnan (8 months ago)
here is article and code demo please take a look https://github.com/miguel-perez/smoothState.js?files=1 ???????????
Kevin Powell (8 months ago)
That looks cool, but I have no experience with it at all, so if I do make a video on it, it won't be for awhile as I'd need to learn to use it properly first.
David McGarry (8 months ago)
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
Kevin Powell (8 months ago)
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 :).
Good to know about the images... And, also,... I did thought that ::before and ::after come before and after the element, not the content itself... So....good....I learned something new :D
FoodLover195 (2 months ago)
P.S (Trying to help, not be rude) You can use the past tense verb 'thought' by itself, or use the future tense verb 'think' prefixed by 'did' to make it past tense; ie. "I did think..." or "I thought..." but not "I did thought..." Generally though just stick with the single past tense verb.
Kevin Powell (8 months ago)
Awesome! I thought that for the longest time too. Probably because that makes sense with how it's named, and even how we use it a lot of the time... but as we know, CSS is often the opposite of intuitive.
Milan M (8 months ago)
Great video!
Kevin Powell (8 months ago)
Thanks Milan :)
sean pheneger (8 months ago)
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
Kevin Powell (8 months ago)
Haha, I had to share that, I spend *so* much time trying to figure out why it wasn't working, lol.
Marcel van Lierop (8 months ago)
Hi Kevin. Great video. Looking forward to the other ones!
Kevin Powell (8 months ago)
Thanks, Marcel, glad you liked it :)
Nikhil Patil (8 months ago)
Thank you Kevin. Was really waiting for these concepts :)
Kevin Powell (8 months ago)
No problem at all, glad you liked it!
Dario George (8 months ago)
Thanks, man
Kevin Powell (8 months ago)
No problem :D

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.