Before and After Pseudo Elements Easily Explained [CSS]

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...
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.vi...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.vi...
🚢 Deploy for FREE on Vercel: vercel.com/amb...
_____________________________________
💖 Show support!
PayPal: paypal.me/code...
_____________________________________
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

[@codeSTACKr]

Thanks for all of the support!! Next up Learn Sass in 30 Minutes: kzbin.info/www/bejne/eHWyq5pqob2Wick 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

[@MeAdhir]

Wow, very nicely explained. Thanks for giving such wonderful tutorials free!

[@codeSTACKr]

Thank you, I really appreciate the support!

[@Brandon-sr4qp]

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!

[@jalfmendonca]

Well done!! This is probably the best pseude elements demonstration I´ve seen on this.

[@rolandblanchard3029]

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!

[@themsmeek1]

I'm half way in this video and already getting the benefits of this! Going to check out the rest of your videos thanks!

[@codeSTACKr]

Thank you!

[@shaholanisha9135]

Nicely Explained! Thanks for making this video.

[@codeSTACKr]

You're welcome!

[@Epikht]

This is the best video about this topic here. Thank you 🤝

[@him1019]

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

[@codeSTACKr]

Glad it was helpful!

[@coffee80119]

Real nice, i hope i can really get my grip on this sort off stuff and start building myself.

[@digigoliath]

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.

[@boukman3668]

your content is very helpfull. Hope your chanel keeps expanding.

[@chickennuggies0242]

Just the video i was hoping for

[@walanjsanket]

Never realised pseudo elements could do so much. You got a sub. Awesome video.

[@codeSTACKr]

Thanks!

[@mortenlund1418]

Thanks - really nice explaining.

[@codeSTACKr]

You are welcome!

[@pratyushkumar7997]

thank you so much sir..❤ you made a video on my doubt !😀😀

[@DanCanning]

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.

[@markovidanovic9760]

I just love your tutorials i hope you will make them more and more in future. :)

[@codeSTACKr]

More on the way! Thanks for your support!!

[@Frankslaboratory]

Great explanation, thank you

[@codeSTACKr]

Thanks for watching!

[@brysontai5107]

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!

[@mykolazhabko3228]

Really helpful lessons! Thanks!

[@codeSTACKr]

Glad it was helpful!

[@romyt9816]

Amazing video.

[@codeSTACKr]

Thanks!

[@samirsamir7779]

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 .!

[@codeSTACKr]

Thank you! Courses are on the way ;)

[@samirsamir7779]

@@codeSTACKr great !

[@Daniel-bb3pf]

excellent , merci pour vos Videos

[@mh5854]

thanks

[@junaidtariq4547]

well explained thanx :)

[@MaksymMinenko]

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

[@user-vm7su4rj7f]

Very cool, thank you

[@koahforrest4090]

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!

[@ykk9k]

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?

[@cybermats2004]

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

[@cybermats2004]

I always code the same as you while you do it

[@codeSTACKr]

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.

[@codeSTACKr]

Start with something simple like a portfolio page.

[@cybermats2004]

@@codeSTACKr Thank you, your videos are the best

[@cybermats2004]

@@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

[@VK-yk7sx]

Great

[@viruff5448]

Nicee

[@haydarhamieh4949]

wow

[@samimahassan1716]

Hi , where we can get the link for the source code ?

[@shamsudeenajani8602]

@12.26: why did you set overflow to hidden.......i get confused most time when i see overflow set to hidden.....THANKS

[@codeSTACKr]

So that anything that falls outside of the container will not show.

[@shamsudeenajani8602]

@@codeSTACKr thank you

[@vitughost6778]

Is it possible to get the source code?

[@lalumierehuguenote]

I cannot seem to find the snippet or emmet or intellisense case for a link in html i just don't find it. help ?

[@lalumierehuguenote]

aslo when I hover on the anchor it the orange block does not move.. hhmm..