Before and After pseudo elements explained - part one: how they work
Вставка
- Опубліковано 1 жов 2024
- 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.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
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 UA-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
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
lol
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 ^^
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?
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
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....
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
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.
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!
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
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.
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.
@@foodlover195_ are u from india ? wahahahahahahahhaa
Yes, #metoo!
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 .
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 for the taking the time to demonstrate the various examples, instead of just saying it. ❤️
An image pseudo element will work if you place it inside of a div (albeit not "directly" in relation to the image)
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
I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙
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🙏🙏
5:58 Beware the wrath of a patient man... when a Canadian says the word "hell", you know he was supremely frustrated.
man Im sorry to say this but you need to get to the point, less words please, I'm getting old watching your video seriously
This video::before {😒}
This video::after {😲}
👍
I love how on the 1st part of the series there are 220k views and on the part three there are only 40k views. The real grinders discovered at the part three video :))
Hahaha. Thay dont need to go any further because thay are so smart :-)
3:05 anyone got a link to his video about the content property/selector?
I wanted to add an animated underline to some text and thought: "it would be so much easier if I could have a tiny block of one pixel under the text so I could just animate and transform it". I saw some strange code which achieved that effect using these before and after elements but couldn't understand what's up!
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!
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.
This was the most easy to understand explanation I have come across since starting to learn Web Development. Thank you!!
same here
Iam also
great! now ill use after for adding full stops to each of my texts
Thank you sir 😊🙏
Might be better to start by saying why pseudo-elements exist, i.e. what problems they solve. You just dived in as if we already knew this...
Without pseudo-elements you'd have to make a wrapper for every situation you needed to apply separate styling to the parts at either end of a block of content. Without the wrapper, the separately styled parts could be offset vertically or horizontally rather than beside each other if they are both within a flexbox - as most content is nowadays due to responsive design.
Since separate styling for the same block of content is a very common web design scenario, we'd have to create a lot of wrapped content - which is tedious to do. So the W3C CSS dev group gave us pseudo-elements instead - a construct designed to efficiently handle this situation.
Yeah. Just saying that _"... ::before and ::after elements are really good ways to add extra style to your website without adding extra markup that you don't really need ... "_ is far too general: you could easily say the same about many other CSS constructs that would not provide the pseudoelements' utility. You must add more *specificity* to your definitions so people see the advantage of gaining an understanding of these pseudoelements.
Muito bom, apesar de eu não saber bem inglês, o código foi muito bem entendido, formidável.
Great video. 👌🏻
Kindly explain why people write pseudo elements in universal selectors as follows..
*,*::before,*::after { box-sizing: border-box;}
* means everything, but you most likely already know www
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
Lol now I can Finally Understand this.
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.
Thank you Kevin, you are a blessing
This is a game-changer!!! Thank you, Sir!!
Does using "position: absolute;" in either ::before or ::after selectors send elements further down in the line? I wonder this because it what confuses me is that if it does indeed send elements down, an ::after selector could appear as if it's actually coming before a ::before element.
Try it and then please tell me too ;)
Very interesting 🤔
I was just tryna create a line to separate some content and was using empty divs
I’ll tell you that didn’t work well but pretty sure this is much better approach for such cases
Finally I understood how the pseudo elements works. Thanks!
You uploaded 2018 and i am watching the lastest hours in 2019.
Same
Found your channel and was like... JACKPOT! definitely subscribed
We'll it's worth mentioning that neither before nor after won't work on any self closing selector like img, input, textarea etc
You said pseudo-elements don't work on images, and guess what I did a few days later? Put a before on li>img. Ouch!
I haven't understand fora week.
Suddenly video pop out my UA-cam. Totally understand.
Keep giving this kind of content,🎈
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!
Great Intro to Before/After Pseudo Classes. Thanks, Kevin
{2021-08-20}
I was really confused on how it works when I'm reading about it, I'm so thankful for your vids!
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.
Thank you Kevin, nice tutorial, very objective, goes to the point !!
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
how to vertically center-aligned the after and before text when using without "display:block" property?
Taking Notes
5:41 - why tags doesn't fit the typical content model in css
6:07 - ::before ::after pseudo elements won't work on tags
Its attractive how calm tNice tutorials guy is
OMG you are incredible I was looking for this and I can't leave this channel without subscribing !!
Wow! So helpful! I finally understand "::before" and "::after"! I got so happy so early on lol Thank you!
video::before {
content: "this";
how-it-is: "completely amazing";
subscribed: "true";
}
Putting a before pseudo-element before an image? 😃 Thanks for the heads-up. 😃😃😃
so basically ::before and ::after is a span with a class, for example:
no? if that makes sense in some way to help me understand
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!
Excelente aula, obrigado amigo. From Brazil.
Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)
Great video! now... the GMS soft really distorted in my mac, I searched a couple of tutorials to change in nu Options content settings,
have you ever made a video on safari related css issues? because once in a while i get css issues that only ocur on safari .i think it would really help alot of people if you made a video on this topic. perhaps ways to solve common issues or where to check for diferences between safari and whole world :D.
Please any master help me!
I set the image with :: before in background to give opacity but on that div my a(link) in not working I give z-index to ::before but than image is hide and I use link and show image on it please help
N00b @ web design here - anything i can use to reduce markup is beneficial, so this video was beneficial. Thanks heaps 😎
Images should work if you put them as display:block, or inside a div.
Eagerly waiting for your css demystified course to open. I really need to learn css right now. I am backend developer
Not using empty for design elements
//core purpose of ::before and ::after.
This video is amazing your explanation was great. all of my confusion was gone after watched this video.
Now I'm wondering, why would someone use before and after ? In the case shown in video, i would rather use a span, give it a classname and work with it. No ?
I've recently wasted a bunch of time trying to use this on some icons that I made ( PNGs that I imported w/ img tag) is there another way to work around this?
Thanks teacher Kevin. You answered my confused mind
simple and informative, THANKS!
Hi I just found your channel and it is great. Do you have a course on Udemy? I will purchase for sure.
Anyone can tell me how to declare ::before and ::after pseudo in javaScript?
thanks so much, was really stuck with gradient button border only on hover problem. helped a lot
I had the same confusion trying to use ::before on input elements. Thanks for noting this problem!
AOA folks if you wants to style images you can use image as background-image on div and then you can easily style like this way.😚
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
IDK why bro but I'm out of breath while and after watching your videos
How would you color the transform perspective box after you hover over it? So instead of that bottom pink, it transforms into like a blue color when you hover over it?
Terrific video!! Finally understood what these are!
Bruh, I came into the video thinking I already knew what ::before & ::after were, but came out surprised I actually didn't XD
Glad that I could help out :D
@@KevinPowell Thank you! Love your vids! :D
Alright then, in order to make a hamburger, I need a patty first, then insert ::before and ::after with content: ' ' as bun.
I'm pretty sure I'm not gay, but tNice tutorials man with Nice tutorials damn handso voice is sure ly about to change that lmao
wow it all makes sense now
Hi this maybe a silly question but how did you split the screen like that ? (left /right parts)
Extremely helpful video. Thanks
Listening to him as I write my notes...the voice resemblance to Elon Musk is uncanny
Thank you for this video i was very confused but you have solved my problem ❤❤
be honest how many knew just this before the 3 part videos:
- set content : ' ' ;
- position: absolute
now abuse it as you like xD
I am using :before element but don't know how to center it to the text without using "list-item" element. It is possible?
I was surprised to see this work: .card-answer > p:first-of-type::before
What if the image was a background could you then use the selector?
One thing to note is that for multilingual websites, it's not good practice to use the content property to actually write text, because you can't translate it except if you have the parent class implement some kind of locale in the class name, but then again, it becomes nasty.
How to change the content of pseudo elements conditionally.
// if you don't reply you are gay
Incredible video. I'm sure you get this alot but you sound a lot like Elon Musk.
i signed up my 8 gmail accounts just to subcribe and thx u for doing this informative video