Learn CSS Pseudo Elements In 8 Minutes

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS pseudo elements are incredibly powerful CSS tools, but they are often misunderstood or underestimated. In this video I will be breaking down exactly what CSS pseudo elements are and how they can be used. I will then show multiple examples of CSS pseudo elements being used in a variety of unique and cool ways so you can have a true idea of the power of pseudo elements.
📚 Materials/References:
CSS Display Property Video: • Learn CSS Display Prop...
attr Blog Article: blog.webdevsimplified.com/201...
CSS Position Video: • Learn CSS Position In ...
Pseudo Element Article: blog.webdevsimplified.com/202...
🧠 Concepts Covered:
- What pseudo elements are
- How to use pseudo elements
- How to use data-attributes in pseudo elements
- Why pseudo elements are so important
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSS #WDS #PseudoElements

[@eskilwadsholt4289]

The thing I really like about your videos is that you go straight to the point without wasting much time, but you also manage to mention key underlying principles so that the logic behind comes through. So much useful info packed in to those few minutes!

[@imadonutdevelops]

So true

[@ridl27]

okay, I realize that I need to watch all of your videos, even if I know some topics really well, lol)

[@maskman4821]

yeah, I feel the same way, Mr. Kyle Cook is the light and the only way of my life to build my dream project sooner and quicker !!!

[@ansarishadman]

True story!

[@foxjonesofficial]

I knew about some... pseudo elements : - ::before - ::after

[@kashmirtechtv2948]

Hahaha

[@codingwithkenny6492]

@Tunde Giwa Yeah I know right! He's probably the best coding teacher I've found so far!

[@TokyoXtreme]

I'm never disappointed with any of your videos. There's always a clear explanation of the topic, along with nice points to remember, and several relevant examples. And your audio quality and overall presentation is top-notch. I hope you never stop making videos!

[@davidrandall3978]

I’ve found it quite useful on “required” form labels is to set the content of the ::before attribute to “required.” and hide it visually. This way the text content is read by assistive technologies before the label text

[@sarahwbs]

Your explanation of why before and after don't work on elements without content was very helpful!

[@WebDevSimplified]

Thanks. I'm glad you enjoyed it!

[@adamespinoza8099]

I always have to google what certain CSS attributes actually do (::before and ::after being one of them). Love this video, definitely do some more CSS tutorials ✨

[@marlowemichaelson1366]

I’m going through a CSS course right now and this was SO DARN HELPFUL!! Thank you so much

[@ankitagarwal4914]

Thumbs Up! I am surprised with the content in 8 minutes. I like your attitude, straight to the concept and meaningful.

[@orcafin1543]

Hey I just went through a college web dev program, and digging for answers found your channel, and really, you do a great job at making it simplified. I do not leave comments much, but you deserve it. I had this idea of using Spotify Api to play music and to display lyrics, and actually thats how I found you. I was inspired by a project that you did similar. Nice on

[@drawdownwind6636]

Another great and informative video, brother!! I'm currently tearing into the FCC certificates and your content has been a huge help along the way. Love and Light!!! Vince.

[@kopilkaiser8991]

Absolutely brilliant tutorial. You were easy to understand because you really know how to explain well. Slowly, calmly, and with simplified information. Since, I'm a visual learner I tend to watch a lot of videos, and I can vouch you are one of the best youtuber in the programming field who know how to teach what is needed and skipping the unnecessary parts which just complicate things. Thank you so much for the video. I was wondering what is this pseudo elements "::before" and "::after" and now I know. :) Have a good day

[@davepassaro8366]

I've been devouring your content for my interview next week and feel like all the stuff I hacked together in the past finally makes sense, THANK YOU!

[@SheikhAmeen]

There's an entire video dedicated to literally anything about web dev on this channel lol. Subscribed!

[@maskman4821]

Thank you Mr. Kyle Cook for this amazing tutorial, I finally understand how pesudo element after / before really works, your tutorially really helps me a lot, no more confusion, I feel free a bit right now, but there is still a lot of to figure out ahead, I will follow your teaching, eventually I will be literally free, I find my way out of mysery !!!

[@yulinglin8508]

The best css explanation course channel!! So many details and so clear! Thank you so much.

[@danielahermosillo8991]

Really cool explanation! Straight to the point, well explained, useful example. Thank u!!

[@NGCreateYT]

Great tutorial, I love these in depth explanations! I never feel lost or confused!

[@beatzoid]

Thank you so much! Your video is exactly what I was looking for and I just started learning CSS your videos are perfect bro keep it up!

[@show_me_the_moneyy]

Content you cover is super useful and easy to understand and appreciate the short duration of your videos - can't concentrate on long videos with all the distraction internet has to offer

[@highfructosecornsyrup]

Your videos are great dude. Short, sharp and sweet with concise and easy to understand language. Good job 👌

[@mohamedelfodilihaddaden9978]

Awesome tutorial! thank you so much !!! I was wondering for a long time the utility of ::after and ::before

[@ismaeilmohamad9570]

You are great at conveying information in a simple and concise way. I tip my hat to you in respect.

[@IshanKesharwani]

I just subscribed to your channel because you really do simplify things for us.

[@arielwalley6762]

This is such a great tutorial! Thank you!

[@ondrejstraka5769]

As previously mentioned, I really appreciate the approach of not wasting a learners time!

[@mohamadghasem7461]

explained simple, calm, amazing; thank you

[@suhanvika_b4199]

Such a crystal clear explanation.. You are a Rockstar!!

[@abdouseck4894]

Nice man, you will grow really fast if you keep uploading so much videos

[@brunopetinatijs]

That's so perfect man!!! Thanks, you're amazing

[@RR-ok4wz]

Perfection. Thank you!

[@minison15]

This is a great tutorial for what I don't know how to google it! Thanks Kyle

[@shlomomoller7440]

Great teacher! Thank you Kyle!

[@emrentoelluminiados]

you opened my horizon, thanks.

[@khoavouc3706]

Thank you so much ,this video of you that i understand about pseudo

[@mayanklatke4692]

More info in less minutes ..straight to the point 👌

[@mdabullais2114]

Authentic information, keep it up. You earned a sub.

[@SulamitaRazumovskiy]

Wow this was super helpful, thank you!

[@ore_bear8045]

I must say you are one of the best youtubers on webdevelopment 👍

[@FelipeBuilesLoaiza]

Awesome explanation, thanks for sharing this.

[@obinnadanil8146]

This is really helpful Thank you

[@thisisgksingh]

Another Amazing video man.

[@webphicdesigner305]

Such an amazing video...Thanks for sharing!!!!

[@mirandaekersund2876]

Super helpful, thank you!

[@HtopSkills]

Even though I'm familiar with CSS, this video was helpful.

[@webunveilers]

Great efforts to train us thank you man

[@LucianoClassicalGuitar]

Amazing stuff. I always wondered where to use these things lol

[@mauricioricaldi4569]

Oh gosh! I am just learning CSS and this topic just made me wonder what was a pseudo element but thanks to you, now I got it... Thank you Bro.

[@chiderathankgodobed4496]

I love web devs . Simple, straight and precise

[@abdurrazzak1612]

Finally I learned pseudo elements, Thanks.

[@mixshots1801]

thanks for starting youtube channel, your channel stand out among so many channels , Thanks , wish you good health.

[@simple8810]

Most ppl are confused about pseudo elements (before and after) even me,I used to use but didnot realized first the excat use of this tool,after watching your video now I am feeling happy using it in projects,Bundle of Thanks man

[@DriveandThrive]

Thank you. I watched a few tutorials and even freecodecamp and couldn't understand what before and after was doing. I understand now

[@beatzoid]

Your lessons are great for visual learners btw

[@paulgomez786]

Thanks brother your videos are easy to understand

[@rapha5210]

Great video. Many thanks

[@langchen1300]

Pseudo Elements used to be intimidating to me, but not anymore after this video. Thanks Kyle!

[@shanmugavel3838]

Clear.,.,Thanks man

[@hamzaashraf9529]

really helping tutorial man

[@usama57926]

great topic and great explanation

[@niklassilfverhielm7654]

That was a really cool trick!

[@rangabharath4253]

Awesome as always

[@wreynoldz]

Another great tutorial!

[@anishjoshi1999]

i hope one day you will have 10 mill subs you are great man... love from nepal

[@levinhale8584]

dude your videos save my life

[@amaldjibo8371]

I like to watch your videos as opposed to people that do 40 mins tuts, keep it up Kyle!

[@fatemehshamsi1903]

Thank you it was really usefull

[@alimuammad925]

Hello sir I like your videos so much that I have subscribed your chanel.I love the way you talk.I understand very quickly what you tell.Thank you

[@adrient104]

Love your content 🙏

[@voiceartist2106]

😍😊Thank You very much This Video helps me to understand the working of pseudo elements thanks sir ji.😊

[@ArielRaskin]

great! thank you

[@LightlyLilyAsmr]

That’s so cool!!

[@dllm3tommy741]

Thanks for the video

[@mladenkaorlic]

So easy after this video!

[@sardonyx_]

Thank you for this video. It has been really helpful, for me specifically on positioning an icon to the left of some text and being able to space everything. Your additional part about the hovering tooltip, is it possible to make it keyboard accessibly without needing to resort to Javascript? Thanks again.

[@mahtabvariyani]

thank god ... your Videos are there :)

[@kamichikora6035]

great content as usual

[@carlotadias9335]

Thank you !

[@IroshanaRavishan]

A great video..!

[@umarmuzammil7332]

thank you very much helped

[@williamthomas2823]

Thanks for the explanation I understand them a lot better 😅

[@user-pq1br4di8u]

very nice video!

[@abdullojonrakhmatullaev1386]

👍👍👍thanks bro!

[@overstandingontherealstory6313]

Good class👍🏼

[@m2kdevelopments]

Awesome Video

[@sonamuhialdeen7866]

Very useful informations

[@thomasdam7438]

Nice explained

[@lantra5563]

thanks for helpful video

[@kzzazzip6272]

quality free content thank you

[@shubhamsharma6907]

Every time I need to get a hold of a css topic, I just search for web dev simplified's video on it!

[@oussamachahidi9201]

bro you are the best

[@chahalpawanpreet]

I just bought the course in the description. I'm looking forward to the premium content as your free content is great

[@WebDevSimplified]

Thanks for the support. I hope you enjoy it!

[@nithinchitra1570]

thanks a lot sir

[@taranerafati9730]

you rock man

[@usama57926]

thank u so much sir

[@ahmedeloufir]

Great video ! one drawback, we can't handle i18n this way (or can we ?)

[@franklinlchigo1607]

Thx a lot bro

[@thecoderraj3777]

Thanks sir 😊

[@theadedheart2307]

Thank you :)

[@pubudunichanikawijesinghe4932]

Wow, Thanx

[@littlestar4045]

thanks 🌹