Before & After CSS Pseudo Elements Tutorial Explained

Learn the before and after css pseudo elements in this quick CSS tutorial. We'll cover the pseudo element selector syntax, as well as take a look at several beginner and advanced use cases!
SUBSCRIBE!:
kzbin.info...
Grab the CSS files and download the slides here:
github.com/wilsmex/edu/tree/m...
Learn CSS Positioning:
• 11 CSS Positioning

[@FollowAndrew]

Who loves CSS Pseudo Elements? 🙋🏻‍♂️

[@klingonac79]

Not me

[@twocatsgaming6628]

Freecodecamp has you drawing hearts to demonstrate this, which is a really impractical and silly way (IMO) to introduce this to someone. Yours is an infinitely better and more helpful demonstration and explanation. So thank you.

[@hulk6315]

I came from same tutorial this tutorial is godsend.

[@ms-gu9if]

This was a great example to show how imaginative you can be with css.

[@danleclaire8110]

Now, I understand pseudo selectors. :) Andrew is awesome. Thanks for the tip at the end and keep it up!

[@rickfearn3663]

Exceptional clarity in presentation. And the advanced example using the before and after pseudo-elements along with skew is very exciting. Thanks, Andrew

[@genuine-codekrys858]

thanks! Andrew you've helped me a lot.

[@reiner6273]

you are very patience. you are a good teacher. even my engish is not that good, i understant it well from now onwards. thank you sir.

[@FollowAndrew]

Thanks! English is great, keep it up!

[@timz4183]

Thank you so much! Andrew.

[@reiner6273]

you saved my life. thank you.

[@salmanhamza4202]

Why you stopped working on CSS explainatory videos. Your way of teaching is amazing .

[@FollowAndrew]

Time time time. Kids and full time work eating up my hours. Oh and the 3D printing I've been tinkering with lately :)

[@newentu]

excelente tutorial!

[@GerritforBazeja]

great Andrew what you drew!!

[@codeinswahili9505]

Very nice tut. Thank you

[@FollowAndrew]

Glad you liked it

[@Ogiart75]

Thanks a lot!

[@smittypotpie]

Great lesson! it made me feel so much better about it cuz you remind me so much of Neil Patrick Harris. Also a bit of Flea from RED HOT CHILI PEPPERS !!!! epic!! XD Rock on freaky bro!!

[@klingonac79]

At 10.22 when you moved "before" with top 100px, it changed from a block element to a inline block element. Why?

[@noushedakib1658]

nice video

[@shubhsagar6234]

Andrew, on applying absolute positions and top:100px on before element, it becomes inline how is that!?

[@LadanSoodmand]

Right where you have changed the first lines to the paragraphs green... what if you just want to do that with the first paragraph? I'm asking, because... I have a blog archive list where I have the button:before in my CSS. This added the buttons needed for my list. But, I'm having the issue of extra buttons, and am not sure how to get rid of them. I know the problem lies in the :before pseudo element. Just don't know how to resolve this problem.

[@FollowAndrew]

I'm not sure, I'd need to see some code. To change the first-paragraph you'd use the ':first-child' pseudo selector

[@LadanSoodmand]

@@FollowAndrew Ok I can give you the source code to my blog if that helps. Or if you want, just the specific code to where the issue lies.

[@LadanSoodmand]

@@FollowAndrew let me know what which you want me to send to look at. Thanks.