Before and After Pseudo Elements Easily Explained [CSS]
Vložit
- čas přidán 19. 09. 2019
- Before and after pseudo elements are an essential part of CSS, but are often overlooked because they may seem confusing and hard to use. In this video I will take the confusion away and explain them so that you can easily incorporate them into your projects.
I'll show you some examples of ::before and ::after pseudo elements. We'll cover why we use double colons instead of single colons, the importance of the content property, and when not to use pseudo elements. Toward the end I will have two complete examples of use cases for pseudo elements.
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
_____________________________________
💖 Show support!
PayPal: paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - • Web Developer Roadmap ...
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / codestackr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #css #learntocode - Věda a technologie
Thanks for all of the support!!
Next up Learn Sass in 30 Minutes:
czcams.com/video/BDOzg4lXcSg/video.html
📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)
amzn.to/2JaiCL8
Wow, very nicely explained. Thanks for giving such wonderful tutorials free!
Thank you, I really appreciate the support!
13:10 was the "light bulb going off" kind of moment for me. And then once again at 15:58... I just spent the rest of the video after that in awe. Thanks for making this simple!
Best explanaition I found so far, I love how you go from simple examples to more complicated ones, showing exactly how powerful these pseudo elements are. Thank you!
Well done!! This is probably the best pseude elements demonstration I´ve seen on this.
I'm half way in this video and already getting the benefits of this! Going to check out the rest of your videos thanks!
Thank you!
Great video. I have heard about Before & After Pseudo Elements before but know nothing about their function & application. You explain it very well and make it is easy to understand. I still have to wrap my head around the transform / translate CSS position control in the last example but with practice, it should be clear. Thank you very much for the awesome content.
Real nice, i hope i can really get my grip on this sort off stuff and start building myself.
your content is very helpfull. Hope your chanel keeps expanding.
This is the best video about this topic here. Thank you 🤝
Just the video i was hoping for
Fabulous tutorial, as always. Thank you. I did come unstuck on the font awesome icons. I finally tracked it down, or at least I got t working.
I swapped in -
font-family: 'FontAwesome';
for -
font-family: 'Font Awesome 5 Free';
and everything was as it should be.
thank you so much sir..❤
you made a video on my doubt !😀😀
This video blew my mind. I'm new to web development and this was not only super useful but also really cool. I didn't understand what the point of ::after and ::before were but this cleared it up. Other videos just explained what they did but didn't give great in depth detail of how it is effectively applied. Great video
Glad it was helpful!
I just love your tutorials i hope you will make them more and more in future. :)
More on the way! Thanks for your support!!
Nicely Explained! Thanks for making this video.
You're welcome!
Never realised pseudo elements could do so much. You got a sub. Awesome video.
Thanks!
Really helpful lessons! Thanks!
Glad it was helpful!
well explained thanx :)
excellent , merci pour vos Videos
Thanks - really nice explaining.
You are welcome!
Great explanation, thank you
Thanks for watching!
Amazing video.
Thanks!
Sir, your video is just amazing and easier to understand for a beginner as me!
But I am not really understand how transform work in CSS, do you have any recommended website or video for just explain it further? Thank You!
thanks
Hello, I've followed through your tutorial and I noticed that in the image card example, the before pseudo-element also fades out with the image but not the after pseudo-element, can you explain why and how to make it not fades out. Thanks. Your videos are awesome!
Great
Nicee
Maybe a bit of a weird question, but why wont the background-color show unless i set the top, left, right, bottom properties? How do the positioning and its attributes work together with pseudo elements?
Great the way you are explaining , really 10/10 . :: Are you planning please to provide a paid long course like : frontend from zero to hero , backend dev from zero to hero... (specially with the PHP language ) thank you .!
Thank you! Courses are on the way ;)
@@codeSTACKr great !
Hi , where we can get the link for the source code ?
I cannot seem to find the snippet or emmet or intellisense case for a link in html i just don't find it. help ?
aslo when I hover on the anchor it the orange block does not move.. hhmm..
Is it possible to get the source code?
Can you help me my biggest problem is that I get confused with all the staff that I learned. I forget things fast and don't know how to keep it in my head. I think i need more than just videos
I always code the same as you while you do it
Yep, that's common. What you should do is come up with a practice project and work through it on your own. When you get stuck, Google is your friend :)
The best way to learn is to just jump in.
Start with something simple like a portfolio page.
@@codeSTACKr Thank you, your videos are the best
@@codeSTACKr and do you have a discord server where newcomers in html and css can ask questions. Google is good but sometimes I need more specific help that fits to me. For example I have problems with the Background right now I dont know how to fit it only on the about me page but when I scroll down there is still a short thing of the background
You can use a 'random' query parameter with unsplash.it to get different images. Like this:
unsplash.it/300/300?random=1
unsplash.it/300/300?random=2
Very cool, thank you
wow
@12.26: why did you set overflow to hidden.......i get confused most time when i see overflow set to hidden.....THANKS
So that anything that falls outside of the container will not show.
@@codeSTACKr thank you