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
Пікірлер: 206
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
okay, I realize that I need to watch all of your videos, even if I know some topics really well, lol)
@maskman4821
4 жыл бұрын
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
3 жыл бұрын
True story!
@foxjonesofficial
3 жыл бұрын
I knew about some... pseudo elements : - ::before - ::after
@kashmirtechtv2948
3 жыл бұрын
Hahaha
@codingwithkenny6492
3 жыл бұрын
@Tunde Giwa Yeah I know right! He's probably the best coding teacher I've found so far!
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
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!
Your explanation of why before and after don't work on elements without content was very helpful!
@WebDevSimplified
4 жыл бұрын
Thanks. I'm glad you enjoyed it!
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 ✨
I’m going through a CSS course right now and this was SO DARN HELPFUL!! Thank you so much
Thumbs Up! I am surprised with the content in 8 minutes. I like your attitude, straight to the concept and meaningful.
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.
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
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 !!!
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
The best css explanation course channel!! So many details and so clear! Thank you so much.
Really cool explanation! Straight to the point, well explained, useful example. Thank u!!
Great tutorial, I love these in depth explanations! I never feel lost or confused!
Your videos are great dude. Short, sharp and sweet with concise and easy to understand language. Good job 👌
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!
Awesome tutorial! thank you so much !!! I was wondering for a long time the utility of ::after and ::before
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!
I just subscribed to your channel because you really do simplify things for us.
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
There's an entire video dedicated to literally anything about web dev on this channel lol. Subscribed!
explained simple, calm, amazing; thank you
Such a crystal clear explanation.. You are a Rockstar!!
This is such a great tutorial! Thank you!
You are great at conveying information in a simple and concise way. I tip my hat to you in respect.
This is a great tutorial for what I don't know how to google it! Thanks Kyle
As previously mentioned, I really appreciate the approach of not wasting a learners time!
Nice man, you will grow really fast if you keep uploading so much videos
That's so perfect man!!! Thanks, you're amazing
Thank you so much ,this video of you that i understand about pseudo
Great teacher! Thank you Kyle!
Authentic information, keep it up. You earned a sub.
Awesome explanation, thanks for sharing this.
Perfection. Thank you!
you opened my horizon, thanks.
Thank you. I watched a few tutorials and even freecodecamp and couldn't understand what before and after was doing. I understand now
More info in less minutes ..straight to the point 👌
Such an amazing video...Thanks for sharing!!!!
Wow this was super helpful, thank you!
Great efforts to train us thank you man
This is really helpful Thank you
thanks for starting youtube channel, your channel stand out among so many channels , Thanks , wish you good health.
I must say you are one of the best youtubers on webdevelopment 👍
Super helpful, thank you!
Thanks brother your videos are easy to understand
Amazing stuff. I always wondered where to use these things lol
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.
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
Great video. Many thanks
Another Amazing video man.
Your lessons are great for visual learners btw
😍😊Thank You very much This Video helps me to understand the working of pseudo elements thanks sir ji.😊
Even though I'm familiar with CSS, this video was helpful.
I love web devs . Simple, straight and precise
great topic and great explanation
Clear.,.,Thanks man
i hope one day you will have 10 mill subs you are great man... love from nepal
Love your content 🙏
Another great tutorial!
Awesome as always
Thank you it was really usefull
Pseudo Elements used to be intimidating to me, but not anymore after this video. Thanks Kyle!
really helping tutorial man
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.
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
That was a really cool trick!
Finally I learned pseudo elements, Thanks.
Thanks for the video
great! thank you
Thanks for the explanation I understand them a lot better 😅
great content as usual
That’s so cool!!
dude your videos save my life
Thank you!
👍👍👍thanks bro!
I like to watch your videos as opposed to people that do 40 mins tuts, keep it up Kyle!
thank you very much helped
A great video..!
Good class👍🏼
very nice video!
thanks for helpful video
Very useful informations
Great video ! one drawback, we can't handle i18n this way (or can we ?)
sir if we want to add multiple elements in after and before then can we do that?
Every time I need to get a hold of a css topic, I just search for web dev simplified's video on it!
Nice explained
So easy after this video!
thank u so much sir
Thank you :)
Thanks for the videos! Why isn't there any editor that tells you what attributes(rules) are required to write some CSS? I feel distressed when some of the CSS I write don't show on the browser.
Awesome Video
I just bought the course in the description. I'm looking forward to the premium content as your free content is great
@WebDevSimplified
3 жыл бұрын
Thanks for the support. I hope you enjoy it!
Can u make a video with more examples where we can use both pseudo elements and pseudo classes on same thing.
thanks a lot sir
Thx a lot bro
quality free content thank you
thank god ... your Videos are there :)
Hi Kyle! May I ask which company do you work for currently? Just really curious.
Thanks sir 😊