Learn CSS ::before and ::after in 4 Minutes

Поділитися
Вставка
  • Опубліковано 27 гру 2024

КОМЕНТАРІ • 171

  • @gonzalobruna7154
    @gonzalobruna7154 5 місяців тому +213

    this is seriously the best explanation I've ever heard

  • @kooyaw4445
    @kooyaw4445 5 місяців тому +80

    I've been coding for almost 2 years, never really understood these CSS properties till today

    • @coding2go
      @coding2go  5 місяців тому +5

      I am glad we could help you with that

    • @JerryAgenyi
      @JerryAgenyi 3 місяці тому +5

      Bro said 2 years...here is Mr 15+ years 😁.
      It's been boring since CSS2 to go back and study again, but CODING2GO makes it lovable again. I am definitely taking classes again.🥰🥰🥰

    • @Kodak_000
      @Kodak_000 10 днів тому +1

      @@JerryAgenyi dang it 15+ years , and then there is me who just started html and css since last month

    • @JerryAgenyi
      @JerryAgenyi 10 днів тому

      @@Kodak_000 😁 you'll be fine really. It's a journey...not an event.

    • @Kodak_000
      @Kodak_000 10 днів тому

      @@JerryAgenyi well said , thanks for the motivation

  • @Manishincode
    @Manishincode 5 місяців тому +17

    Just discovered this channel today and 1 thing i really loved about this is he really cares for the time 😄

  • @Thekidisalright
    @Thekidisalright 5 місяців тому +5

    Omg, I have trying to understand the use cases of ::before and ::after as a self-taught programmer for so long and your video just explain it so simply in minutes, you have earned a sub my friend, thank you.

  • @codesthenos
    @codesthenos 5 місяців тому +13

    GREAT EXPLANATION for real less than 4 minutes of pure gold

  • @juhen9
    @juhen9 5 місяців тому +87

    Bro said max-content 🤯 thanks! Great vid

    • @Eavesdro_pper
      @Eavesdro_pper 5 місяців тому +7

      It was amazing 😊 I have learnt this one

  • @dikans2717
    @dikans2717 5 місяців тому +5

    I usually copy those pseudo class without trully understanding what they really means. Now I can see the true power of it. Easy to understand, not wasting time

  • @PsychFacts_
    @PsychFacts_ 3 місяці тому +3

    I discovered after, before and finally MAX-CONTENT. Unbelievable

  • @alienduckrl
    @alienduckrl 2 місяці тому +1

    Bro i'm french i learn html and CSS for 2 weeks in high school for begining, m'y teacher talks about these pseudo elements and i don't understand what it was but thanks to your video i really understand big thank to you

  • @lcch9755
    @lcch9755 11 днів тому

    Best explanation ever bro! Just for those not familiarized, please take the HTML/CSS course first and then you'll understand why this is very easy to take on. Thank you from the bottom of my heart

  • @strategistaow3520
    @strategistaow3520 4 місяці тому +1

    Finally
    I had problems understanding those
    Especially before and after why they are called that way what difference they make
    I see that they can be used as same thing
    Now i understand them way better

  • @MOHAMMEDKHALANDER-g1c
    @MOHAMMEDKHALANDER-g1c 5 місяців тому +2

    Nobody can surpass you sir , hats off hats off. I am literally not getting how to praise you .For real.
    This is the first ever tutorial in my life ,that, I learned something new which I wanted to understand, and that too within 4 minutes. Your explanation was really nice super fantastic 👏 ❤

  • @FinnDeJong
    @FinnDeJong 25 днів тому

    You explained it really well, made me feel like it was obvious when I didn't understand it for 3 years.

  • @keerthikak2503
    @keerthikak2503 5 місяців тому +1

    I really messed about how to got that ordered list items style to coloured ...Now cleared.. Thank you for posting this. Keep posting the stuffs like this❤

  • @zackstorm2888
    @zackstorm2888 4 місяці тому +2

    yow, its been days that i see it and never understood the meaning, i was afraid to look for a video and finish by watching a video of 1h but you saved me thanks, now im gonna go see the video about positions

  • @kareembamidele4804
    @kareembamidele4804 4 місяці тому +1

    I'm so happy I am more comfortable and confident using ::before and ::after pseudo element

  • @omupadhyay25
    @omupadhyay25 3 місяці тому +1

    Suuuppppper Dupper SirAmazing Explanation

  • @saurabh-yp1jr
    @saurabh-yp1jr 2 місяці тому +1

    now i have power of css on the palm of my hands.. thanks sir....

  • @kangkanbaishya4686
    @kangkanbaishya4686 4 місяці тому +1

    seriously bro , you said the style in just 2 minutes which I have been practicing for 2 hours
    🤯🤯🤯🤯

  • @ditimurati4124
    @ditimurati4124 Місяць тому

    This might be the clearest video of CSS that I've watched!

  • @2010akatsuki
    @2010akatsuki 4 місяці тому +1

    Man, I've been struggling with this for so long now. And the explanations I was getting just did not make sense to make. Thank you for this video

  • @keochanmarido188
    @keochanmarido188 4 місяці тому +1

    This is the best explain CSS before and after class. Thank you for your hard work in explaining and editing the video to show me how it was done. Keep up the good work.

  • @shahfaisal3923
    @shahfaisal3923 5 місяців тому +4

    You won a subscriber from Afghanistan.
    Nice explanation.
    Please pray for our country to get rid of talibans proxies of CIA and ISI.

  • @linesA9798
    @linesA9798 2 місяці тому +1

    I've been looking for this for a long time and now i found ... Thank you so muchh

  • @mdalmamunit427
    @mdalmamunit427 2 місяці тому

    I love the way you explained this concept-it’s so clear and easy to understand! 😮

  • @reginoryanchristian9856
    @reginoryanchristian9856 4 місяці тому +1

    I can't believe this is free, this video is Udemy level tutorial.❤

  • @awesomejr.530
    @awesomejr.530 5 місяців тому +13

    Wow... I have been coding for years now and this is the first time am understanding CSS pseudo after and before.
    Thank you so much for this video. You're a good teacher. 😊

  • @balajinadar1503
    @balajinadar1503 5 місяців тому +1

    Keep giving us tutorials like this, it helps a lot and gives new ideas for my projects.
    Thanks man!

    • @coding2go
      @coding2go  5 місяців тому

      Glad to hear that!

  • @tasm.aex7
    @tasm.aex7 5 місяців тому +1

    Dude never saw such wonderful explanation of these topics literally watched everything I needed ❤

  • @hossein22Z
    @hossein22Z 4 місяці тому +1

    For the first time I'm eager to do some CSS 😂 Amazing video, thanks.

  • @MrSatisfaction-wz1gb
    @MrSatisfaction-wz1gb 5 місяців тому +2

    Just WOW. I always wondered how people create so detailed hover animations!

  • @mohitashliya8750
    @mohitashliya8750 4 місяці тому +1

    Finally finally finally I understand these complex pseudo classes😂

  • @htlkmsi2775
    @htlkmsi2775 5 місяців тому +1

    It’s so simple yet so visually rewarding. You have shown us the golden key to nice site👌🏻

  • @kienbe590
    @kienbe590 2 місяці тому +1

    Really, even I have just started on CSS understand

  • @howtech420
    @howtech420 2 місяці тому +1

    Great video ❤. Everything is explained about before and after pseudo class.

  • @honestfxpredator7903
    @honestfxpredator7903 Місяць тому

    Coding for nearly 2 years with React and TS: Filled in a knowledge gap for me there, probably my weakest area of front end until now.

  • @baabansu9243
    @baabansu9243 4 місяці тому +1

    The best explanation ever. Thank you.

  • @isaidstream4547
    @isaidstream4547 4 місяці тому +7

    Thank you for teachin me that pseudo elements are not as important as I thought. 😂 So ::after and ::before can wait

    • @coding2go
      @coding2go  4 місяці тому

      Glad I could help 💀

  • @narottams9663
    @narottams9663 5 місяців тому +1

    Amazing videos man! Just amazing....most helpful content I found on web design.

  • @av123-yt
    @av123-yt 3 місяці тому +1

    I like the gradient underline thats amazing

  • @scare4ycat
    @scare4ycat 5 місяців тому +1

    hey could you please explain why they use box-sizing border-box in ::after and ::before elements? This is easily the best explanation of pseudo elements out there. Keep up the good work.

    • @RamaGuptaOfficial
      @RamaGuptaOfficial 5 місяців тому

      Dear Rudra,
      box-sizing: border-box;
      is used so that all the margin and padding will get removed (including previous and default margin & padding).
      Warm Regards,
      Ram

  • @_ayush_5495
    @_ayush_5495 5 місяців тому +3

    Subscribed man, keep the good content coming

    • @coding2go
      @coding2go  5 місяців тому

      Thank you, welcome to the channel 👋

  • @Nietgeamuseerd
    @Nietgeamuseerd 2 місяці тому +1

    Absolutely brilliant. Thanks a lot.

  • @DE-nw9sv
    @DE-nw9sv 4 місяці тому +1

    This was SO helpful, thank you!

  • @JimmyAlexson-c8z
    @JimmyAlexson-c8z 4 місяці тому +1

    Wow you really incredible bro ,u really make me get familiar with css 🎉❤❤

    • @coding2go
      @coding2go  4 місяці тому

      Glad to hear that! Happy Coding ✌

  • @piratekingrudy
    @piratekingrudy Місяць тому

    Thanks, I was quite confused regarding this.

  • @amanfahimn9595
    @amanfahimn9595 3 місяці тому +1

    True like all say very useful and effective to learn

  • @ujjwalssharma8149
    @ujjwalssharma8149 4 місяці тому +2

    Your explanation was excellent 🔥 but dude plz give the source code for nav bar at 0:18 , that was really awesome

  • @ashkanahmadi
    @ashkanahmadi 4 місяці тому +1

    Great video thanks. Just a note: you should be using the :marker pseudo element for styling the bullet points

  • @komiljonqosimov4002
    @komiljonqosimov4002 3 місяці тому

    Even though, I am a self taught middle full stack developer, this was new to me. Till now I thought it was about rendering time, like before meaning before completely rendering the element, and after meaning after full render of the element.😂

  • @MamunurRoshid93
    @MamunurRoshid93 3 місяці тому +1

    Your explain just awesome

  • @abdulsamadsiddiqui1649
    @abdulsamadsiddiqui1649 5 місяців тому

    Bro thanks alot i use it but i didn't know what it really do thanks now i can do anything i want

  • @Jamshaid.Developer
    @Jamshaid.Developer 4 місяці тому

    Amazing video sir it seems that this video only created for me thank you

  • @salmaindrianputri164
    @salmaindrianputri164 5 місяців тому +2

    Great explanation

  • @HillBilly-rm4op
    @HillBilly-rm4op 5 місяців тому

    loved it understandable, streight to the point keep it up

  • @Theritiksaini
    @Theritiksaini 5 місяців тому +1

    sir when will your css course will live i badly needed it with your explanation you are the best

    • @coding2go
      @coding2go  5 місяців тому +1

      We will publish the course next week on udemy ;)

  • @Tola_rhythms
    @Tola_rhythms 5 місяців тому +6

    Pseudo elements has always been my problem

  • @Chekad-k4o
    @Chekad-k4o 4 місяці тому +1

    thanks for your tutorial .

  • @kalablack6996
    @kalablack6996 5 місяців тому

    DAMN Bro, thanks it was helpful, i did not understand these properties man u are awesome. Subs

  • @karim-gb5nx
    @karim-gb5nx 4 місяці тому

    What a masterpiece, many thanks

  • @diowryyy7
    @diowryyy7 2 місяці тому

    this is so good! thanks!

  • @tahmidrzishan
    @tahmidrzishan 3 місяці тому +2

    Awesome tutorial. Mashaallah.

  • @saurabhgautam3584
    @saurabhgautam3584 4 місяці тому

    Keep it up..best explanation so far...

  • @2pac2pac2pac
    @2pac2pac2pac 2 місяці тому

    how the background linear for the after element show in top of the button background when hover ? i mean it has lower z index than the button? i thin we should make the button backgorund to trnasparent when hover

  • @macrooooo__
    @macrooooo__ 5 місяців тому

    wow, thank you for this. I didn’t know I can do it like thar

  • @WhimsyWobbleFluffyMuffin
    @WhimsyWobbleFluffyMuffin 5 місяців тому +2

    Absolutely helpful mate🙏

  • @royedits65
    @royedits65 5 місяців тому

    Absolutely Amazing 😮

  • @vinzanity68
    @vinzanity68 5 місяців тому

    New sub. Ty for short n sweet tutorial

  • @مازنالفار-ز1ز
    @مازنالفار-ز1ز 4 місяці тому

    Thank you, you are really wonderful and the lesson was very useful

  • @moonmean7955
    @moonmean7955 4 місяці тому

    Succinct and well explained 👏🏾

  • @AS-mc2db
    @AS-mc2db 4 місяці тому

    Really really appreciated... I just subscribed to ur❤ channel

  • @2pac2pac2pac
    @2pac2pac2pac 2 місяці тому

    how the background linear for the after element show in top of the button background when hover ? i mean it has lower z index than the button

  • @nurudeennajeem6605
    @nurudeennajeem6605 5 місяців тому

    You're the best. Thanks a lot

  • @ViMeas
    @ViMeas 14 днів тому

    Love your videos❤

  • @naveduddin5445
    @naveduddin5445 5 місяців тому +1

    Wow, that was awesome detailed explanation

    • @coding2go
      @coding2go  5 місяців тому

      Glad you liked it

  • @jugmilic2096
    @jugmilic2096 Місяць тому

    ❤Thanks for help!❤

  • @AS-mc2db
    @AS-mc2db 4 місяці тому

    Really understand....thank you

  • @chijiokennabueze7696
    @chijiokennabueze7696 5 місяців тому

    This video is sweet 🤣 I want more 😎

  • @pyaephyo8108
    @pyaephyo8108 5 місяців тому

    Thank You Very Much❤!

  • @abcdabcd8605
    @abcdabcd8605 5 місяців тому

    Amazing explanation!

  • @titangaming600
    @titangaming600 4 місяці тому

    That's pretty cool actually

  • @kueifeng66
    @kueifeng66 2 місяці тому

    great job!!

  • @Rhutie
    @Rhutie 3 місяці тому

    Wow…thanks for this

  • @mostafahosseini2762
    @mostafahosseini2762 Місяць тому

    THANKS !!!🙏

  • @sg8nj
    @sg8nj 4 місяці тому

    Amazing🎉

  • @Tola_rhythms
    @Tola_rhythms 5 місяців тому

    Thanks for the video

  • @danushadhaamarasekera7215
    @danushadhaamarasekera7215 5 місяців тому

    Thanks a lot bro

  • @edutechab
    @edutechab 5 місяців тому

    This is amazing 👏🏽

  • @tolotradavid5794
    @tolotradavid5794 5 місяців тому

    That's very good tutorial

  • @feelingdabeats
    @feelingdabeats 5 місяців тому

    more videos like this please

  • @TimCullin
    @TimCullin 6 днів тому

    How do I put the button into a nav bar? I tried but lost the gradient border. You can't always just copy and paste these things?

  • @NewtonesIndustries
    @NewtonesIndustries 3 місяці тому

    Why there was no difference when you changed the position to relative on h1? 2:13

  • @ramzyabdul185
    @ramzyabdul185 5 місяців тому

    Fantastic 🎉🎉

  • @musmanshahid5866
    @musmanshahid5866 5 місяців тому

    Really helpful bro

  • @muhammad_zohaib936
    @muhammad_zohaib936 5 місяців тому

    Awesome ❤

  • @mrlukec
    @mrlukec 4 місяці тому

    Lovely!

  • @muhammedashkar692
    @muhammedashkar692 2 місяці тому

    nice one.

  • @tochimclaren
    @tochimclaren 4 місяці тому

    So you apply the hover on the containing element::after

  • @followying392
    @followying392 3 місяці тому

    omg
    This one is amzing

  • @danushadhaamarasekera7215
    @danushadhaamarasekera7215 5 місяців тому

    Thanks brother