Before and After pseudo elements explained - part one: how they work
HTML-код
- Опубликовано: 13 фев 2018
- 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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
I wasn't prepared to be attacked by this masterpiece.
I wasn't prepared to be attacked by the bright white background
LOL! Agreed.
To which I was, indeed.
Same bruh , as a backend developer I used get irritatedly confuse bc of this, it's masterpiece indeed
this guy is my life when it comes to understanding css syntaxes in a quick second
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.
He gotta be the greatest
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 ^^
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
You're the most helpful CSS instructor out there! Thank you for simplifying complicated concepts so easily
he introduce himself as the css king lol
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
Awesome! They are really handy for adding some nice flourishes without needing any extra markup :)
Still?
Yes
@@KevinPowell Kevin, I have not been able to apply transitions to before and after pseudo classes. How to do it?
Hey, new coder here, thanks for clarifying this. I was so confused on this topic.
same here, guessing you are not a new coder anymore lol.
@@guanahtamar914 but i am. There are always some new coders :D
Same
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....
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!
This was awesome!! I've always ignored these when looking at sample code with very little thought. Very informative.
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.
I swear, been doing this web dev for a while and this guy always amazes me with the detail straightforward explanations. Nice!
thanks for the taking the time to demonstrate the various examples, instead of just saying it. ❤️
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
This was SO helpful! Thank you so much for this video series. Heading straight over to part two!!
Kevin, you're amazing. In the first three minutes you solved my problem! Thanks. Can't wait to watch the rest of the series.
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
This was the most easy to understand explanation I have come across since starting to learn Web Development. Thank you!!
same here
I had the same confusion trying to use ::before on input elements. Thanks for noting this problem!
I spent so long trying to figure out what does before and after actually do. Thank you so much, cleared out alot of doubts
I love the fact that I learn something new from each and every one of your videos. This one included obviously. 👍
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 :
Welcome aboard!
Man, your videos are just amazing! What a simple way to explain those things! Congratulations!
God why has it taken me this long to learn this properly. Thanks again!!!
5 years and still helpful thank you
Finally I understood how the pseudo elements works. Thanks!
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.
THANK YOU! This was so helpful! I will be checking out more of your videos! You explained this concept so well!
Thank you from the bottom of my heart for simplifying this for me!! The best explanation ever!
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!
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.
So glad that the video was able to help, and thanks for subscribing! Also, thank you so much for the kind words 😊
Love how the quality of your videos just keeps getting better
5:58 Beware the wrath of a patient man... when a Canadian says the word "hell", you know he was supremely frustrated.
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 .
Really great stuff Kevin! Keep at it!
I never get bored watching you Kevin
thanks for sharing
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!
Thank you for the video, Kevin. This really was well-explained and helpful.
This is a game-changer!!! Thank you, Sir!!
Definitely love your tutorials, Kevin!
Thank you bro, now I get the clarity about ::before and ::after
Im binge watching your whole channel and I love it. Thank you.
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 :)
Thanks kevin for clearing the confusion!!
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.
Your stuff has taught me alot. Been about 2 years since I've been watching
Thanks for sticking around for so long :D
Finally understood what these are !!! Thanks Kevin, you are really a CSS master !!!
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.
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.
Works too.
Thanks for clarifying this subject!
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!
OMG you are incredible I was looking for this and I can't leave this channel without subscribing !!
Very simple and useful explanation! Thanks Kevin!
these were one of the most mystic elements for me, thank you for the explanation ! going to next video...
Wonderful explanation - the power of before and after is so much fun to play with :D
Best video on before and after so far.
Thank you Kevin. Was really waiting for these concepts :)
No problem at all, glad you liked it!
Best explanation of this topic on the whole Internet!!!
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.
Excelente work! I am retaking web design and this clarifies a lot. Thank you for a short and informative video.
Glad to hear that it helped!
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
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 :).
Thank you Kevin, nice tutorial, very objective, goes to the point !!
Awesome video, Kevin!!!
Great video! Clear, understandable, even inspiring. Thank you for making this. I learned something today. - Many blessings.
So happy to hear that John!
Thank you Kevin, you are a blessing
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
Haha, I had to share that, I spend *so* much time trying to figure out why it wasn't working, lol.
This is really useful, thanks Kevin!
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
So glad to hear that it helped clear things up! Very happy to help 👍
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.
Terrific video!! Finally understood what these are!
Dear Kevin! You are a wonderful teacher! Thank you!
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 😊
Another good one, Kevin, thanks!
you are one of the best web dev tutors in this platform
Found your channel and was like... JACKPOT! definitely subscribed
Amazing tutorial Kevin!
But still able to explain each stage in a basic manner. Honestly thanks man!
Great simple and clear explanation. Thanks.
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.
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🙏🙏
Amazing, I am so happy I came across this. Thank you
Simple & effective, Kevin. Cheers.
This was so helpful, thank you very much.
This video is amazing your explanation was great. all of my confusion was gone after watched this video.
wow this is amazing! I am defo becoming a programmer now! when I found out your channel even better than design course
wow! This makes so many things easier!! Thank you Kevin!!
Thank you Kevin. Now i understand what is the use of these pseudo-classes. ++++
Hi Kevin. Great video. Looking forward to the other ones!
Thanks, Marcel, glad you liked it :)
Thanks for clearing this up!
Very clear and precise explanation. I like this!!!
I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙
Thanks Kevin, this is great!
Thanks Kevin, great explanation
very clear and precise explanation.
Terrific video! I FINALLY understood these pseudo elements. Thank You!
Awesome!
Love the before and after pseudo elements.
Amazing!
Very clear explanation!
this is truly a before and after in my css
I like your videos Kevin, very clear to understand and I benefit a a lot from this channel .
Glad to hear that Alibadi!
Very nice video!! Really cool stuff, you taught there