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

  • @eskilwadsholt4289
    @eskilwadsholt42894 жыл бұрын

    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

    @imadonutdevelops

    Жыл бұрын

    So true

  • @ridl27
    @ridl274 жыл бұрын

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

  • @maskman4821

    @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

    @ansarishadman

    3 жыл бұрын

    True story!

  • @foxjonesofficial

    @foxjonesofficial

    3 жыл бұрын

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

  • @kashmirtechtv2948

    @kashmirtechtv2948

    3 жыл бұрын

    Hahaha

  • @codingwithkenny6492

    @codingwithkenny6492

    3 жыл бұрын

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

  • @davidrandall3978
    @davidrandall39784 жыл бұрын

    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

  • @TokyoXtreme
    @TokyoXtreme4 жыл бұрын

    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!

  • @sarahwbs
    @sarahwbs4 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

    Thanks. I'm glad you enjoyed it!

  • @adamespinoza8099
    @adamespinoza80994 жыл бұрын

    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
    @marlowemichaelson13663 жыл бұрын

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

  • @ankitagarwal4914
    @ankitagarwal49144 жыл бұрын

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

  • @drawdownwind6636
    @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
    @kopilkaiser899111 ай бұрын

    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

  • @maskman4821
    @maskman48214 жыл бұрын

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

  • @orcafin1543
    @orcafin15432 жыл бұрын

    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

  • @yulinglin8508
    @yulinglin85084 жыл бұрын

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

  • @danielahermosillo8991
    @danielahermosillo89914 жыл бұрын

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

  • @NGCreateYT
    @NGCreateYT2 жыл бұрын

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

  • @highfructosecornsyrup
    @highfructosecornsyrup3 жыл бұрын

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

  • @beatzoid
    @beatzoid3 жыл бұрын

    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!

  • @mohamedelfodilihaddaden9978
    @mohamedelfodilihaddaden99783 жыл бұрын

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

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

  • @IshanKesharwani
    @IshanKesharwani4 жыл бұрын

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

  • @show_me_the_moneyy
    @show_me_the_moneyy2 жыл бұрын

    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

  • @SheikhAmeen
    @SheikhAmeen3 жыл бұрын

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

  • @mohamadghasem7461
    @mohamadghasem7461 Жыл бұрын

    explained simple, calm, amazing; thank you

  • @suhanvika_b4199
    @suhanvika_b41992 жыл бұрын

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

  • @arielwalley6762
    @arielwalley67623 жыл бұрын

    This is such a great tutorial! Thank you!

  • @ismaeilmohamad9570
    @ismaeilmohamad95704 күн бұрын

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

  • @minison15
    @minison153 жыл бұрын

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

  • @ondrejstraka5769
    @ondrejstraka5769 Жыл бұрын

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

  • @abdouseck4894
    @abdouseck48944 жыл бұрын

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

  • @brunopetinatijs
    @brunopetinatijs2 жыл бұрын

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

  • @khoavouc3706
    @khoavouc37064 жыл бұрын

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

  • @shlomomoller7440
    @shlomomoller74403 жыл бұрын

    Great teacher! Thank you Kyle!

  • @mdabullais2114
    @mdabullais21143 жыл бұрын

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

  • @FelipeBuilesLoaiza
    @FelipeBuilesLoaiza Жыл бұрын

    Awesome explanation, thanks for sharing this.

  • @RR-ok4wz
    @RR-ok4wzАй бұрын

    Perfection. Thank you!

  • @emrentoelluminiados
    @emrentoelluminiados Жыл бұрын

    you opened my horizon, thanks.

  • @DriveandThrive
    @DriveandThrive2 жыл бұрын

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

  • @mayanklatke4692
    @mayanklatke46923 жыл бұрын

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

  • @webphicdesigner305
    @webphicdesigner3052 жыл бұрын

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

  • @SulamitaRazumovskiy
    @SulamitaRazumovskiy Жыл бұрын

    Wow this was super helpful, thank you!

  • @webunveilers
    @webunveilers Жыл бұрын

    Great efforts to train us thank you man

  • @obinnadanil8146
    @obinnadanil814611 ай бұрын

    This is really helpful Thank you

  • @mixshots1801
    @mixshots180110 ай бұрын

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

  • @ore_bear8045
    @ore_bear80454 жыл бұрын

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

  • @mirandaekersund2876
    @mirandaekersund28763 жыл бұрын

    Super helpful, thank you!

  • @paulgomez786
    @paulgomez7863 жыл бұрын

    Thanks brother your videos are easy to understand

  • @LucianoClassicalGuitar
    @LucianoClassicalGuitar8 ай бұрын

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

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

  • @alimuammad925
    @alimuammad9254 жыл бұрын

    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

  • @rapha5210
    @rapha52104 жыл бұрын

    Great video. Many thanks

  • @thisisgksingh
    @thisisgksingh2 жыл бұрын

    Another Amazing video man.

  • @beatzoid
    @beatzoid3 жыл бұрын

    Your lessons are great for visual learners btw

  • @voiceartist2106
    @voiceartist21062 жыл бұрын

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

  • @HtopSkills
    @HtopSkills3 жыл бұрын

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

  • @chiderathankgodobed4496
    @chiderathankgodobed449610 ай бұрын

    I love web devs . Simple, straight and precise

  • @usama57926
    @usama579264 жыл бұрын

    great topic and great explanation

  • @shanmugavel3838
    @shanmugavel38383 жыл бұрын

    Clear.,.,Thanks man

  • @anishjoshi1999
    @anishjoshi19994 жыл бұрын

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

  • @adrient104
    @adrient1044 жыл бұрын

    Love your content 🙏

  • @wreynoldz
    @wreynoldz2 жыл бұрын

    Another great tutorial!

  • @rangabharath4253
    @rangabharath42534 жыл бұрын

    Awesome as always

  • @fatemehshamsi1903
    @fatemehshamsi1903 Жыл бұрын

    Thank you it was really usefull

  • @langchen1300
    @langchen1300 Жыл бұрын

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

  • @hamzaashraf9529
    @hamzaashraf95292 жыл бұрын

    really helping tutorial man

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

  • @simple8810
    @simple88103 жыл бұрын

    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

  • @niklassilfverhielm7654
    @niklassilfverhielm76544 жыл бұрын

    That was a really cool trick!

  • @abdurrazzak1612
    @abdurrazzak1612 Жыл бұрын

    Finally I learned pseudo elements, Thanks.

  • @dllm3tommy741
    @dllm3tommy741 Жыл бұрын

    Thanks for the video

  • @ArielRaskin
    @ArielRaskin2 жыл бұрын

    great! thank you

  • @williamthomas2823
    @williamthomas2823 Жыл бұрын

    Thanks for the explanation I understand them a lot better 😅

  • @kamichikora6035
    @kamichikora60354 жыл бұрын

    great content as usual

  • @LightlyLilyAsmr
    @LightlyLilyAsmr Жыл бұрын

    That’s so cool!!

  • @levinhale8584
    @levinhale85843 жыл бұрын

    dude your videos save my life

  • @gabrielferrin
    @gabrielferrin9 ай бұрын

    Thank you!

  • @abdullojonrakhmatullaev1386
    @abdullojonrakhmatullaev13863 жыл бұрын

    👍👍👍thanks bro!

  • @amaldjibo8371
    @amaldjibo83713 жыл бұрын

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

  • @umarmuzammil7332
    @umarmuzammil73322 ай бұрын

    thank you very much helped

  • @IroshanaRavishan
    @IroshanaRavishan3 ай бұрын

    A great video..!

  • @overstandingontherealstory6313
    @overstandingontherealstory63132 жыл бұрын

    Good class👍🏼

  • @user-pq1br4di8u
    @user-pq1br4di8u Жыл бұрын

    very nice video!

  • @lantra5563
    @lantra55634 жыл бұрын

    thanks for helpful video

  • @sonamuhialdeen7866
    @sonamuhialdeen78663 жыл бұрын

    Very useful informations

  • @ahmedeloufir
    @ahmedeloufir2 жыл бұрын

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

  • @usama57926
    @usama579264 жыл бұрын

    sir if we want to add multiple elements in after and before then can we do that?

  • @shubhamsharma6907
    @shubhamsharma69072 жыл бұрын

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

  • @thomasdam7438
    @thomasdam74382 жыл бұрын

    Nice explained

  • @mladenkaorlic
    @mladenkaorlic3 жыл бұрын

    So easy after this video!

  • @usama57926
    @usama579264 жыл бұрын

    thank u so much sir

  • @theadedheart2307
    @theadedheart23073 жыл бұрын

    Thank you :)

  • @bushigi5913
    @bushigi59133 жыл бұрын

    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.

  • @m2kdevelopments
    @m2kdevelopments3 жыл бұрын

    Awesome Video

  • @chahalpawanpreet
    @chahalpawanpreet3 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    Thanks for the support. I hope you enjoy it!

  • @achuthasaicharan148
    @achuthasaicharan1484 жыл бұрын

    Can u make a video with more examples where we can use both pseudo elements and pseudo classes on same thing.

  • @nithinchitra1570
    @nithinchitra15709 ай бұрын

    thanks a lot sir

  • @franklinlchigo1607
    @franklinlchigo1607 Жыл бұрын

    Thx a lot bro

  • @kzzazzip6272
    @kzzazzip62723 жыл бұрын

    quality free content thank you

  • @mahtabvariyani
    @mahtabvariyani Жыл бұрын

    thank god ... your Videos are there :)

  • @FF-ie6sd
    @FF-ie6sd4 жыл бұрын

    Hi Kyle! May I ask which company do you work for currently? Just really curious.

  • @thecoderraj3777
    @thecoderraj37773 жыл бұрын

    Thanks sir 😊