Before and After pseudo elements explained - part one: how they work
1,074,849
Published 2018-02-14
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 refresh your bro...
---
Support me on Patreon: 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: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
All Comments (21)
-
I wasn't prepared to be attacked by this masterpiece.
-
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.
-
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 ^^
-
You're the most helpful CSS instructor out there! Thank you for simplifying complicated concepts so easily
-
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
-
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
-
This was awesome!! I've always ignored these when looking at sample code with very little thought. Very informative.
-
Hey, new coder here, thanks for clarifying this. I was so confused on this topic.
-
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!
-
I swear, been doing this web dev for a while and this guy always amazes me with the detail straightforward explanations. Nice!
-
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
-
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.
-
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
-
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.
