Learn CSS Pseudo Elements In 8 Minutes

Подписаться 1,6 млн

Просмотров 251 тыс.

50% 1

🚨 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

Опубликовано:

9 дек 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 206

@eskilwadsholt4289 4 года назад

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 4 года назад

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!

@TokyoXtreme 4 года назад

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 4 года назад

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

@adamespinoza8099 4 года назад

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 3 года назад

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

@ankitagarwal4914 4 года назад

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

@orcafin1543 2 года назад

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

@kopilkaiser8991 11 месяцев назад

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

@sarahwbs 4 года назад

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!

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

@yulinglin8508 4 года назад

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

@maskman4821 4 года назад

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

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

@danielahermosillo8991 4 года назад

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

@SheikhAmeen 3 года назад

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

@NGCreateYT 2 года назад

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

@show_me_the_moneyy 2 года назад

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

@mohamedelfodilihaddaden9978 3 года назад

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

@beatzoid 3 года назад

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!

@ismaeilmohamad9570 5 дней назад

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

@highfructosecornsyrup 3 года назад

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

@IshanKesharwani 4 года назад

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

@mohamadghasem7461 Год назад

explained simple, calm, amazing; thank you

@ondrejstraka5769 Год назад

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

@minison15 3 года назад

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

@arielwalley6762 3 года назад

This is such a great tutorial! Thank you!

@brunopetinatijs 2 года назад

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

@suhanvika_b4199 2 года назад

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

@RR-ok4wz Месяц назад

Perfection. Thank you!

@shlomomoller7440 3 года назад

Great teacher! Thank you Kyle!

@khoavouc3706 4 года назад

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

@emrentoelluminiados Год назад

you opened my horizon, thanks.

@abdouseck4894 4 года назад

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

@FelipeBuilesLoaiza Год назад

Awesome explanation, thanks for sharing this.

@webphicdesigner305 2 года назад

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

@mdabullais2114 3 года назад

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

@mayanklatke4692 3 года назад

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

@SulamitaRazumovskiy Год назад

Wow this was super helpful, thank you!

@mixshots1801 10 месяцев назад

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

@mirandaekersund2876 3 года назад

Super helpful, thank you!

@obinnadanil8146 11 месяцев назад

This is really helpful Thank you

@LucianoClassicalGuitar 8 месяцев назад

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.

@ore_bear8045 4 года назад

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

@thisisgksingh 2 года назад

Another Amazing video man.

@webunveilers Год назад

Great efforts to train us thank you man

@chiderathankgodobed4496 10 месяцев назад

I love web devs . Simple, straight and precise

@paulgomez786 3 года назад

Thanks brother your videos are easy to understand

@DriveandThrive 2 года назад

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

@shanmugavel3838 3 года назад

Clear.,.,Thanks man

@rapha5210 4 года назад

Great video. Many thanks

@langchen1300 Год назад

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

@usama57926 4 года назад

great topic and great explanation

@wreynoldz 3 года назад

Another great tutorial!

@alimuammad925 4 года назад

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

@beatzoid 3 года назад

Your lessons are great for visual learners btw

@hamzaashraf9529 2 года назад

really helping tutorial man

@simple8810 3 года назад

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

@rangabharath4253 4 года назад

Awesome as always

@voiceartist2106 2 года назад

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

@LightlyLilyAsmr Год назад

That’s so cool!!

@abdurrazzak1612 Год назад

Finally I learned pseudo elements, Thanks.

@sardonyx_ 3 года назад

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.

@niklassilfverhielm7654 4 года назад

That was a really cool trick!

@fatemehshamsi1903 Год назад

Thank you it was really usefull

@anishjoshi1999 4 года назад

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

@adrient104 4 года назад

Love your content 🙏

@dllm3tommy741 Год назад

Thanks for the video

@ArielRaskin 2 года назад

great! thank you

@carlotadias9335 4 месяца назад

Thank you !

@HtopSkills 3 года назад

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

@abdullojonrakhmatullaev1386 3 года назад

👍👍👍thanks bro!

@williamthomas2823 Год назад

Thanks for the explanation I understand them a lot better 😅

@IroshanaRavishan 3 месяца назад

A great video..!

@kamichikora6035 4 года назад

great content as usual

@umarmuzammil7332 2 месяца назад

thank you very much helped

@amaldjibo8371 3 года назад

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

@levinhale8584 3 года назад

dude your videos save my life

@user-pq1br4di8u Год назад

very nice video!

@ahmedeloufir 2 года назад

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

@mladenkaorlic 3 года назад

So easy after this video!

@overstandingontherealstory6313 2 года назад

Good class👍🏼

@m2kdevelopments 3 года назад

Awesome Video

@sonamuhialdeen7866 3 года назад

Very useful informations

@lantra5563 4 года назад

thanks for helpful video

@thomasdam7438 2 года назад

Nice explained

@usama57926 4 года назад

thank u so much sir

@nithinchitra1570 9 месяцев назад

thanks a lot sir

@theadedheart2307 3 года назад

Thank you :)

@mahtabvariyani Год назад

thank god ... your Videos are there :)

@franklinlchigo1607 Год назад

Thx a lot bro

@kzzazzip6272 3 года назад

quality free content thank you

@bushigi5913 3 года назад

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.