CSS Before and After pseudo elements explained - part three: as design elements

Exploring how to use ::before and ::after to create some fun design elements without any extra markup.
The before and after pseudo elements are great, since they let us add in content without any extra markup. This makes them perfect for adding in design flourishes, since we can do it without creating empty divs.
In this video, I first I look at using them to make a fun thing that can be used on headlines, and the second one a very fun hover effect that was inspired from this codrops article: tympanus.net/codrops/2014/06/...
Here is the CodePen: codepen.io/kevinpowell/pen/Zr...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZread channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 230

  • @rafabagrowski1918
    @rafabagrowski19185 жыл бұрын

    Amazing. I watched all 3 parts and immediately solved 6 issues at my job. Instant subscribe ;-)

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Very awesome, so glad I could help, and thanks for subbing!

  • @fersahahmet9597
    @fersahahmet95975 жыл бұрын

    At last I found someone who really knows css and what he is doing. Not mimics some code learnt from some where else. Mr. Powell you ARE a pro. And thank you so much for all the effort putting these video series together

  • @konraddariuszwoloszyn9206
    @konraddariuszwoloszyn92066 жыл бұрын

    As always, Your videos are the top level of professionalism combined with great explanation and a healthy dose of humor. Great job!

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    Thanks so much for the kind words Konrad, really glad you're enjoying my content!

  • @MrTanguero
    @MrTanguero3 жыл бұрын

    Loved all three parts of the series and that link you shared also has some amazing ideas! Thanks a lot, Kevin!

  • @justinpayne6845
    @justinpayne68455 жыл бұрын

    Thank you so much! After watching this series I now know how to make those little notification bubbles KZread has telling how many new videos you have and like facebook uses for new posts and such.

  • @octavian3033
    @octavian30334 жыл бұрын

    Wow!! Watching these videos is like having your mind opened to a new CSS multiverse where anything is possible.

  • @amysheeter877
    @amysheeter8772 жыл бұрын

    You're the best. Just finished this series, and I was trying to do something similar to this on a website I am currently working on but could NOT figure out how to make it look good. This answered all my questions. Thank you for your amazing work!

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

    I'm still very, very early in my front-end journey but watching stuff like this blows my mind! I can't wait until I get to a point where I am implementing stuff like this into my sites!

  • @wiecek00
    @wiecek003 жыл бұрын

    You are providing really great content Kevin. I started watching your channel and learned a lot of new things as well as solidified my knowledge. Thanks for your help and keep up the good work! I already subscribed :)

  • @mo3ad96
    @mo3ad965 жыл бұрын

    As always, Your videos are the top level of professionalism thank you so much

  • @adityads1339
    @adityads13394 жыл бұрын

    Watched all 3 videos that were part of the series. Great content! I can confidently say that I understand ::before and ::after, so much better than before. Thank you so much!!!

  • @CliveStephensonCoUkDesigner
    @CliveStephensonCoUkDesigner5 жыл бұрын

    Fabulous Kevin, you have a real skill for explaining things

  • @ricard112
    @ricard1125 жыл бұрын

    These videos are gold. Thank you for sharing.

  • @marikabasagoitia6828
    @marikabasagoitia68282 жыл бұрын

    Thank you so much for this! This really cleared up before and after pseudo elements for me and helped create a really cool effect on a page I’ve been working on.

  • @nerozone84
    @nerozone843 жыл бұрын

    Your videos are great. I just watch any video you have randomly and find a solution to a problem I have in a design. Like in this video, I didn't realise I had to go set box-sizing on before and after psuedo elements. I was wondering why a psuedo element I had wasn't quite lining up the way I expected. Thanks!

  • @seemsas
    @seemsas6 жыл бұрын

    I am more of the backend guy but your videos makes me more and more interested in frontend coding. Thank you!

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    That's awesome. Backend scares me, lol.

  • @travisbburch
    @travisbburch4 жыл бұрын

    this was fantastic - can't wait to watch your other videos

  • @jenniferward6821
    @jenniferward68213 жыл бұрын

    Thanks Kevin watched all three and lights went on!

  • @sravant
    @sravant6 ай бұрын

    Your channel deserve 10 million subscribers. Thanks for all the videos Kevin.

  • @santiagocalvo
    @santiagocalvo3 жыл бұрын

    im learning CSS and your channel is the BEST!!! thnx a lot!!!

  • @kristianulvund4274
    @kristianulvund42744 жыл бұрын

    Awesome, Kevin🤩 CSS is so much fun!

  • @tontonsan3534
    @tontonsan35345 жыл бұрын

    As a beginner, no online course was really explaining what you could do with ::before and ::after and I always thought "I'll get back to it later". Well, I finally took the plunge after your video appeared in my recommended autoplay after watching another tutorial, and I just had to leave a comment because you explain so well, and it is now so easy for me and I feel like you taught me in 1hour what several days of school would have. Thank you and you got a new subscriber :)!

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks for the sub Tontonsan, and I'm really glad you like my approach!

  • @shashankdasaniya
    @shashankdasaniya6 жыл бұрын

    This is really a great learning for me,from watching your videos. Thumbs up !

  • @360theosiris
    @360theosiris2 жыл бұрын

    This stuff is amazing and completely changed my view on what is possible with just css.. Thanks for this! Subscribed

  • @philkewley
    @philkewley2 жыл бұрын

    I had an idea replace a blocky looking footer section with a simple text based section, but that meant finding a way to separate content without using background colours or images - I've watched this video so many times over the years without fully understanding how I could use it. And now today when I needed inspiration and direction I remembered it! So I follow everything on the video and place a 50% height before & after behind h3 text, set the after color to transparent, reduce the height to 50%, give it a 3px border-top and push it down using vh, until I've basically got a horizontal rule with the brand name nicely centred. I even managed to place it all in a centred container so it only takes up 90% width. It looks a lot better than that messy description - Honestly I can't thank you enough for sharing so much knowledge, your teaching keeps me going forwards. Thank you

  • @dyllanmccreary688
    @dyllanmccreary6885 жыл бұрын

    Wow. Watching this series i expected to only learn about ::before and ::after pseudo elements. not only did i learn that but you helped me fix a few issues i was stuck on. thanks guy, great videos.

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Very awesome, glad it helped Dyllan!

  • @ilhambagirov571
    @ilhambagirov5712 жыл бұрын

    Ohh God. Finally i found someone who could explain me what these elements do. Thanks a lot for giving this valuable knowledge to us. 👍🙏

  • @joeldcanfield_spinhead
    @joeldcanfield_spinhead4 жыл бұрын

    Another excellent explanation. I think the reason this isn't used much is because it's all a bit abstract until you see examples. I suspect that as we all get more familiar and see more examples, there'll be ongoing creative use of pseudo elements like this.

  • @KevinPowell

    @KevinPowell

    4 жыл бұрын

    I almost exclusively use them for design elements. It's actually good from an accessiblity point of view too, rather than adding extra markup that doesn't actually have a purpose other than looking pretty :)

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

    These videos are GREAT! Thank you so much for sharing.

  • @insaneviruss
    @insaneviruss5 жыл бұрын

    Really enjoyed the video, the pacing and your entire thought process. *First timer on the channel* *subscribed*

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    So glad that you enjoyed it so much, and a big thank you for the sub :)

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

    Kevin, realy thank u for this series of videos. Love from Brasil .

  • @aminedrouche5465
    @aminedrouche54652 жыл бұрын

    You got my brain working 😂 i was thinking with you along the video to find out how to do it. Awesomeness is a fact 😍😍 thank you

  • @daniamsalem
    @daniamsalem4 жыл бұрын

    This is a fantastic video, upping my skills and code cleanliness.

  • @cyndikirkpatrick7578
    @cyndikirkpatrick75785 жыл бұрын

    I sure have learned a lot from you. Thank you.

  • @danielkim4487
    @danielkim44875 жыл бұрын

    Really cool. thanks for the lesson Kevin!

  • @tilakmadichettitheappdeveloper
    @tilakmadichettitheappdeveloper4 жыл бұрын

    I watched all 3 parts - this is so cool !

  • @johnthiongo4305
    @johnthiongo43053 жыл бұрын

    I have a new found respect for css thanks to you

  • @karstenlehmann13595
    @karstenlehmann135952 жыл бұрын

    Thanks a lot for these three videos!

  • @vijais5692
    @vijais56924 жыл бұрын

    You are my all time favourite instructor in youtube ❤❤❤❤❤

  • @SothearithKONGMrMuyKhmer
    @SothearithKONGMrMuyKhmer3 жыл бұрын

    Thanks Kevin; that’s amazing! 👏👍

  • @herveboulangue6051
    @herveboulangue60516 жыл бұрын

    Thank you Kevin. Love your tips !!! Very usefull and clear as usual :)

  • @MroMroMarc
    @MroMroMarc3 жыл бұрын

    Man! Im speechless! This is so fun and useful! Ive already said that but you are a great instructor. I wish I could afford some monetary gratification like buying your course. I will, someday soon. For now, thank you very much.

  • @akinyemiolalekan1681
    @akinyemiolalekan16813 жыл бұрын

    This is simply awesome.....Great job...

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

    Thank you master, all explained clearly!!

  • @jeffjarvis222
    @jeffjarvis2224 жыл бұрын

    I enjoy your videos. A super-easy way to style the .intro class "Generic Heading" is with grid using grid-template-columns: 1fr auto 1fr. (I learned this by watching your videos about grid, heh). Add a small grid-gap for white space around the text. Now the ::before and ::after elements just need background color and you're done! Keep up the excellent work, Kevin.

  • @jijiwaiwai
    @jijiwaiwai4 жыл бұрын

    Thank you! I learned a lot

  • @lucadifazio2735
    @lucadifazio27353 жыл бұрын

    Awesome. This is incredible

  • @inayathkhan100
    @inayathkhan1005 жыл бұрын

    Great Tutorial Kevin

  • @mohdsaquib380
    @mohdsaquib3804 жыл бұрын

    Really loved it. You killed it ✌️

  • @riyazahamed5378
    @riyazahamed53782 жыл бұрын

    Wow, ::before watching this video i assumed that i know something about css, but ::after i realized i am doing css in a wrong way, Thank you Sir (immediately subscribed )

  • @Swiftrunner10123
    @Swiftrunner101233 жыл бұрын

    You are incredible! Thank you so much!

  • @kelvinsmith4894
    @kelvinsmith48945 жыл бұрын

    Watched the complete 3 parts on TV, had to grab my laptop to comment, like and subscribe!!! Thank you Kevin...

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks so much Kelvin, glad you liked it enough to take the time to do that! Thanks for the sub :D

  • @keithho5335
    @keithho53354 жыл бұрын

    just found your channel. IM HOOKED

  • @thuanle9444
    @thuanle94445 жыл бұрын

    Thanks @Kevin.

  • @duke1sanj1
    @duke1sanj16 жыл бұрын

    Excellent as always 👍👍👍

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    Thanks Sanjay!

  • @22D011AROCKIAVIMALJAPSONA
    @22D011AROCKIAVIMALJAPSONA6 ай бұрын

    For these kind of effects, outline - offset with some transitions also cool.👍👍

  • @zt.5677
    @zt.56774 жыл бұрын

    Good material. Thank you.

  • @hachij_
    @hachij_6 жыл бұрын

    thanks for the tuts sir! :D

  • @ya-juchang5099
    @ya-juchang50995 жыл бұрын

    Thank you so much! That is amazing and you are definitely a good teacher!

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks a lot, glad that you liked the video :D

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

    This is so cool!

  • @pettgree
    @pettgree4 жыл бұрын

    dudes, CSS seems awesome after this tutorial 🤣 Thanks Kevin

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

    Kevin, you're a boss

  • @jimdart8219
    @jimdart82196 жыл бұрын

    Kevin, once again thank-you for the details on how all this works and why. Just had a thought (it happens now and then). Have you ever considered explaining the planning stages for building a website. What goes on before we hit exclamation tab.Thanks again Kevin, you have raised my ability 10 fold.

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    I sort of talked about it once very briefly in one of my other videos, but I am about to start redesigning my personal site. I'm pretty much in the ideation phase at the moment. I should totally make some videos of what I'm doing and how I'm approaching it.

  • @soumya_r_mohanty
    @soumya_r_mohanty4 жыл бұрын

    Excellent explanation Kevin. Could you please explain more about how .card::before goes behind image without setting any z-index on it.

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

    This man a legend

  • @BenRogersWPG
    @BenRogersWPG2 жыл бұрын

    Outstanding

  • @osmbj1377
    @osmbj13773 жыл бұрын

    Awesome, thanks

  • @pagarevijayy
    @pagarevijayy3 жыл бұрын

    this is awesome!

  • @brandonv8525
    @brandonv85252 жыл бұрын

    Your videos are pretty good, I speak Spanish but I better understand your videos than the other videos in my language

  • @mahdijafaree5332
    @mahdijafaree53322 жыл бұрын

    Awesome! You are Perfect! thanks!😃

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

    Thank you so much!

  • @arya_bakh
    @arya_bakh4 жыл бұрын

    Great Job bro

  • @andersonhall08
    @andersonhall085 жыл бұрын

    subscribed... these are great videos, man. Thanks!

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks so much for the sub Andy! So glad to hear that you're enjoying my videos!

  • @maheshbeeravelli
    @maheshbeeravelli6 жыл бұрын

    Awesome content worth watching. How did I miss to watch this content before.

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    Glad you're liking it 😁

  • @maheshbeeravelli

    @maheshbeeravelli

    6 жыл бұрын

    Kevin Powell shared with all my peers (y)

  • @JustJordano
    @JustJordano3 жыл бұрын

    Tank you, you really helped me there.

  • @juhandvan
    @juhandvan6 жыл бұрын

    Amazing !

  • @tomnagy2439
    @tomnagy24393 жыл бұрын

    Great stuff !

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    Thanks so much!

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

    I like using before and after as a nice colorful thick underline that is 30% of the width of content.

  • @georgeliss4015
    @georgeliss40156 жыл бұрын

    Thank you!

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    No problem 😀

  • @OmarAshrafBombo
    @OmarAshrafBombo3 жыл бұрын

    You are the one man ✌🏼 thank U

  • @huzaifarasheed2313
    @huzaifarasheed23133 жыл бұрын

    Great video

  • @marjan5170
    @marjan51702 жыл бұрын

    Thank you for this 🤩🤩🤩🤩🤩

  • @sobeidalagrange7129
    @sobeidalagrange71295 жыл бұрын

    So clear!!! :)

  • @kamaboko1
    @kamaboko16 жыл бұрын

    Delicious. Great videos.

  • @shimphillip
    @shimphillip5 жыл бұрын

    Good job. Your videos are superb.

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks Phillip!

  • @lildreamsone
    @lildreamsone5 жыл бұрын

    Superbe ! merci pour tout

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Pas de problems 😁

  • @melbournemeliodas215
    @melbournemeliodas2155 жыл бұрын

    Phew, Exam secured! Thank you Kevin Powell! Im going to watch all of your series after my Exam, but can I ask if you have like a playlist?

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    I have a bunch of playlists :)

  • @ILTECHS
    @ILTECHS6 жыл бұрын

    Nice video. Very good work.

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    Thanks!

  • @user-mo3cw6go7c
    @user-mo3cw6go7c6 жыл бұрын

    tank you vary maatch

  • @colindante5164
    @colindante51643 жыл бұрын

    One of the most overlooked selectors to overcome glitches when working will rollovers. In this presentation (referring to the codepen) its .card:hover .card__text {opacity: 1;} This will target Any element with a class name of 'card_text' that descends from an element that is hovered on with a class name 'card' .

  • @aqua123670
    @aqua1236705 жыл бұрын

    Great thank you

  • @zakirhossain4876
    @zakirhossain48765 жыл бұрын

    Nice tutorial. Thanks a lot.

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Glad that you enjoyed it :)

  • @milanm6538
    @milanm65386 жыл бұрын

    Thank you, sir!

  • @KevinPowell

    @KevinPowell

    6 жыл бұрын

    No problem Milan :D

  • @eminaliyev4953
    @eminaliyev49534 жыл бұрын

    Thank you so much

  • @TheSETJ
    @TheSETJ5 жыл бұрын

    I can only say: Amazing!

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Glad you liked it :)

  • @peekaboo6026
    @peekaboo60263 жыл бұрын

    I can't thank you enough.

  • @sumantapader9725
    @sumantapader97255 жыл бұрын

    awesome..!!..❤️

  • @killDJuice
    @killDJuice5 жыл бұрын

    I am so glad i found you😂😅

  • @jasonma1645
    @jasonma16455 жыл бұрын

    thats so cool

  • @chaudhary3394
    @chaudhary33945 жыл бұрын

    Awesome... Your genius

  • @KevinPowell

    @KevinPowell

    5 жыл бұрын

    Thanks :D