CSS Before and After pseudo elements explained - part two: the content property

Подписаться 921 тыс.

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

50% 1

The before and after CSS pseudo elements are great, and they have the content property which a lot of people don't really know how powerful it actually is, so in this video I show you some fun things you can do with it, from a markupless tool tip to a quick dive into CSS counters, which are awesome!
The codepen is here: codepen.io/kevinpowell/pen/a1...
There is more to the css content property than this, but I think these will open your eyes to the possiblities:
00:00 introduction
01:00 use case: simple text befor/after
01:09 use case: insert images (e.g. background)
01:48 use case: opening/close quotes
03:27 use case: tooltip without a markup
07:57 tooltip: add hover effect + animation
09:31 tooltip: animation origin
10:53 tooltip reminder: attr
11:00 use case: text decorations
12:35 use cases: text decoration: font awesome
14:07 use cases: counters
16:34 use cases: counters: adding text (space, braces, etc)
17:11 use cases: counters: put in a circle
18:23 use cases: counters: put in a circle: align using flex
18:49 use cases: counters: put in a circle: border-radius
19:25 use cases: counters: put in a circle: border
19:37 use cases: counters: put in a circle: border-box
20:01 use cases: counters: put in a circle: color
20:19 use cases: counters: ol
21:39 use cases: counters: ol: turn off list style
23:38 use cases: counters: ol: couter-reset
And some more information on the content property for those who'd like some more reading - developer.mozilla.org/en-US/d...
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

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

2 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

"I hope you learned something", yes, I just learned that I know nothing about CSS ^^

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

Same lol

@rakeshkumar-zr8du 3 года назад

@@mtiive3598 Same lol lol

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

Don't wprry.. nobody knows

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

true 100%

@jonathan-3008 2 года назад

You probably know more than you think because the dunning Kruger effect

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

Like yours "...this should work..." and a second of tension before it finally works. That let us know you're a human just like the rest of us. The magic of CSS.

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

I really like that about him too. Also very easy to follow

@facundocorradini 6 лет назад

man this is seriously one of the best channels on web development. Just a sidenote for your tooltips example: transitioning the position (such as bottom, left, etc) is resource intensive; you should rely on transforms whenever possible, as they can be GPU accelerated. In this case, transform:translateY would do the trick you were looking for. Or even much simpler, using "transform-origin:bottom;" would achieve the "growing from the text" effect in a much more efficient way. Cheers!

@KevinPowell 6 лет назад

Yeah, someone else pointed the same thing out, it was a complete oversight on my part. I got lazy :\. Thanks for mentioning it though! Another thing to be more careful with going forward.

@KevinPowell 6 лет назад

Also, thank you so much for the high praise. There are some other good web dev channels out there, so I really appreciate the sentiment!

@joeldcanfield_spinhead 5 лет назад

I like simpler, but I'm way fuzzy on some of these effects. Could one of you two gents show exactly where to put the "transform-origin: bottom" and which other lines of code to leave out? I'm putting together a bunch of code snippets to study in order to get my head around this.

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

saved

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

Hello, I hope I understood what you meant. I don't know if the bottom and left attributes needed to be changed but I still used transform-origin, that I didn't know about and it worked! Thanks :) If some people want to have the code snippet for that (which I don't guarantee the quality ^^), here it is: a[data-tool-tip]::after { content: attr(data-tool-tip); background-color: $clr-gray; padding: 1em 3em; color: white; border-radius: 8px; font-size: 0.8em; display: block; position: absolute; bottom: 100%; left: 0; white-space: nowrap; // allow to remove the wrapping transform: scale(0); transform-origin: left bottom; transition: transform 0.2s; } a[data-tool-tip]:hover::after { transform: scale(1); }

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

01:00 use case: simple text befor/after 01:09 use case: insert images (e.g. background) 01:48 use case: opening/close quotes 03:27 use case: tooltip without a markup 07:57 tooltip: add hover effect + animation 09:31 tooltip: animation origin 10:53 tooltip reminder: attr 11:00 use case: text decorations 12:35 use cases: text decoration: font awesome 14:07 use cases: counters 16:34 use cases: counters: adding text (space, braces, etc) 17:11 use cases: counters: put in a circle 18:23 use cases: counters: put in a circle: align using flex 18:49 use cases: counters: put in a circle: border-radius 19:25 use cases: counters: put in a circle: border 19:37 use cases: counters: put in a circle: border-box 20:01 use cases: counters: put in a circle: color 20:19 use cases: counters: ol 21:39 use cases: counters: ol: turn off list style 23:38 use cases: counters: ol: couter-reset This table of content was created using "Smart Bookmarks for RU-vid" chrome extension. You can import and edit them using this extension. You can install it from the official Chrome Store Page (shortened link): smb.page.link/store

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

That's awesome, I've added it to the description and I'll try to remember that for futuer videos :)

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

@@KevinPowell Those help me to find needed topics quickly in a video when I want to review something specific. And it may look impressive only because of the good structure of your lessons, thanks!

@MartinHAndersen 5 лет назад

I just realised how little I know about CSS (-: I really love your teaching style

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

Very glad to subscribe and go to Patreon for this channel. Everything I have seen here is more than gold. Thanks, Kevin, and keep doing this. You are really good at it!

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

As a Jr front end dev, this has honestly been the most enlightening CSS tutorial. Was working on editing list styling on something where I don't have access to the HTML and this is a godsend!

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

I'm so glad I found this channel. I'm a backend developer and I know almost nothing about the capabilities of CSS. This classes are amazing! New subscriber right here, you got me pumped to learn

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

Wow! Thanks Kevin. I knew of the ::before and ::after selector, but I hadn't realised how powerful they were and you've certainly given me plenty of ideas for using them in the future. I'm grinning from ear to ear at how cool this is!

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

in first 9 minutes i learned so many thing i did not knew about css, im so glad i found your channel, every top you discuss and demonstrate makes perfect sense and i understand it very quickly, thank you kevin.

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

Recommending your videos to everyone in my class- I learn SO much from your explanations. I have to understand the 'how it works' to really internalize these tools... thanks so much!

@milleniummoses 6 лет назад

You never disappoint. I stay anxious for your next video.

@KevinPowell 6 лет назад

Thanks David!

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

Kevin, I like when you explain the reason of doing this or that step and why. I do appreciate the efforts you have put in your videos.

@NeroIvanY 6 лет назад

So useful tips! You make all this wierd pseudos look very easy to understand! Will definitely use them more confident now. Thanks a lot, Kevin!

@KevinPowell 6 лет назад

Glad that they're easier to understand now Ivan!

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

I'm so glad I found your videos. I learned a lot so far and these pseudo elements are a great addition. I just added a ::after to a project I'm working on and I was able to get rid of some useless markup making my code much cleaner :) Thank you

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

This tutorial is what i've been looking for! Very clear and easy-to-understand for a non-techie like me to understand what i can do with pseudo elements for my design. Awesome!!

@luiscolome75 5 лет назад

OMG!! Kevin one of the best videos about ::after and ::before. Thanks million for all the info. I'm gonna watch it again an put some of the content in practice today.

@SimonFabcic Год назад

OMG, so many new things in one video :O I have so much more to learn :) Nice job!

@zariachenshui7386 Год назад

This is SUCH a helpful video. Thank you so much for your time and shared expertise. I love that you explain each step as you're doing it, and that you start simple and ugly and build into complex and beautiful.

@Escko 5 месяцев назад

Thx Kevin , these 2 videos will be extremely influential in my future cssing. Awesome job brother. ❤

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

Your channel is really underrated... I have found many useful stuff that I was not understanding from other creators. Thank You

@akariskk4065 5 лет назад

I am quite a beginner and now feel too thankful that I found your channel! Your lessons are always so resourceful, intensive and helpful. Still cannot believe those videos are free! I always look forward to any upcoming videos from now on! Thanks a lot!!!!!!

@KevinPowell 5 лет назад

You're very welcome! I'm super glad that they've helped you out 😁

@carolmckay5152 5 лет назад

Thank you so much for the counter demonstration, reading about it and seeing it implemented are two very different things. I hope to have call to use it some day.

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

There is so much you can do with the help of ::before and ::after! Thank you very much for sharing

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

Thank you so much for this video! I needed that content: attr(data-tool-tip) for my project, but didn't know how to do it!

@bassemkhozam 6 лет назад

Great tutorial, and definitely one of the best RU-vid channels. thanks a lot Kevin.

@hoangtronglap2015 5 лет назад

another awesome new stuff I 've just learned from your tutorial, Kevin! keep it up and thanks a looooot!

@AlexTechie 5 лет назад

I'm stumped as to how you don't have more subscribers. Keep up the great work!

@KevinPowell 5 лет назад

Thanks Alex! I'm super happy with how big my channel is! But I do pretty much zero self promotion, so that really doesn't help, lol. It's growing pretty steadily at the moment though 😁

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

I don't understand how 44 people have disliked this video - literally, what is there to dislike??? Kevin's videos couldn't be improved on - pitched perfectly with almost every detail and question explained.

@waleedjaved2885 6 лет назад

KP you rock, your way of explaining things is excellent. I have just started to watch your tutorials and already learnt a lot of things. Thank you so much!

@KevinPowell 6 лет назад

Thanks a lot Waleed, I'm glad you're enjoying my videos!

@jnoah7537 6 лет назад

Your tutorials are top quality. I get so much from them 👍🏽 4th watched in a row

@KevinPowell 6 лет назад

Very awesome Noah, so glad you're enjoying my videos!

@igordasunddas3377 Год назад

This is definitely my favorite CSS channel.

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

Thanks for showing how much can be done with pseudo elements.

@capsey_ Год назад

Small additional tip: If you don't want your link tooltips to be clickable along with the link itself, you can add `pointer-events: none` and now it is only visual

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

i have never liked CSS , untill knowing this channel. Supper Great CONTENT 👏🏽 . Keep it up Kevin, sending you all the love from Kenya

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

I never knew you could access attribute values in CSS. This changes a lot of things for me! Thanks a lot!

@tiramisu514 6 лет назад

This is the third video of yours I've watched, and you are actually the best channel for web design

@KevinPowell 6 лет назад

Thank you so much, I'm glad that you're enjoying my content 😁

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

Just learned about before and after from checking out csszengarden, these two videos are awesome! thanks for making these

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

@Kevin Powell you are awsome, I have never seen css pattern like you have wrote. I have seen your many videos and learn too much to you. Again thanks to you to deliver too much costly knowledge freely. Thanks

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

u got a subscriber best person on youtube coding community that actually cares to talk about minor to major things in css. appreciate ++

@yildirimanil 5 лет назад

This one is one of the most instructive videos I've seen on RU-vid about CSS. Definetely worth to watch every part. Many thanks for the effort. I feel like I've found a treasure. We are so lucky to have you on RU-vid. (writing a comment to a video first time in my life :) )

@KevinPowell 5 лет назад

Thanks so much for the kind words Anil, and really glad that you enjoyed it enough to leave your first RU-vid comment! Thanks for taking the time to let me know how much you liked it :)

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

me too!! luckiest recommendation on youtube :')

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

The thing you did with the quotes was very beautiful. And thanks for your awesome tutorial. How could I not discover your channel for so long! Once again awesome tutorial. Please keep it up and yeah! I followed you on Instagram.

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

So good for a beginner like me to realize how pseudo elements work, thank you!!!!

@ChunHoiLam 5 лет назад

A really nice tutorial, thank you so much!! Will start to implement this counter today.

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

now i realized how little i know of css. i celebrate your mastery man, and aswell your great teaching skill

@Jerry-dg7cv 4 года назад

Thank you Kevin!! learned a bunch of new stuffs here!!! All in one package :D

@TerjeNesthus 5 лет назад

Amazing video, thanks. Css never seems to stop amaze me.

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

Learned CSS Counter looking cool & lots of use case... Thanks a Lot

@Manjeetkundu 5 лет назад

I was here just for the pseudo elements but learned a lot of other cool tips as well. Thanks

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

amazing video mannnnn!!! YOU ARE TRULY THE KING OF CSS!

@Furki4_4 Год назад

this is getting more exiting

@NoCrispin 6 лет назад

I really like your videos. I like that you're explaining how to use this stuff and also why one would want to use it.

@KevinPowell 6 лет назад

Glad to hear that Tim, it's great to know that there are so many people out there who really want to understand the why behind things!

@TheDevilscrap Год назад

No comments...perfect one, thanks so much for this videos!!!

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

Oh man, I used to completely ignore ::before and ::after elements, thinking they're almost useless. This video gave me a completely new perspective.

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

Glad you enjoyed it, and happy I can help add to your arsenal a little bit!

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

You are quickly becoming my favorite, goto instructor.

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

wow ! I love the way you explain everything, thanks

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

Nice speak, nice speed, very good work - thanks!

@jabiribnmuzammel3978 5 лет назад

One of the best teacher I have ever seen . Please keep going. Love

@GrantHawkey 6 лет назад

Man, I've been working with CSS for 15+ years and had not come across these CSS3 rules before - so thanks heaps Kevin!

@KevinPowell 6 лет назад

So happy that I've been able to help out a little Grant! CSS has so many amazing properties that go under the radar it's crazy. Some of them are more useful than others, but it's crazy how many there actually are! One benefit of having this channel is I get to discover a lot of them when doing research for videos :)

@dr__ey Год назад

thank you so much for this video Kevin, it helped a lot

@caffeinated-pixels 3 года назад

Super tutorial. I'm a lot less scared and confused by pseudo-elements now!

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

Excellent tutorial for more detailed typographic styling

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

Your teaching skill is extraordinary. I can't believe I'm enjoying learning css.

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

its the voice and the tone that makes my brain focus 100% to his explanations

@seemsas 6 лет назад

Thank you. I didn't realize the power of sudo elements. Very interesting and a big field for creativity.

@KevinPowell 6 лет назад

Yeah, we can do some really awesome things with them, two of which I'll be looking at next week :)

@develscrapper 6 лет назад

i understand (as coming from linux) same as you: 'sudo element', but i think its just Kevin Powell's pronunciation? I think it should say "Pseudo element" ... + nice voice but he swallows letters while speaking. Which makes it really hard to understand for non native English speakers as i am.

@seemsas 6 лет назад

haha, thanks for the correction :)

@KevinPowell 6 лет назад

I didn't even realize he'd spelled it wrong, lol. Sadly in this case, it's English being English and the 'P' is silent, so it actually is pronounced the same as 'sudo'.

@thiagovilla970 6 лет назад

Yeah. In Portuguese, for instance, the "p" is plosive and non-silent, i.e., it is pronounced loud and clear. It varies with language.

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

Congratulations! The best channel on web development!

@KamelJabber1 6 лет назад

I strangely can't stop watching these. GG!

@KevinPowell 6 лет назад

Glad you're enjoying them!

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

thank you Kevin for the great tutorial . learnt a lot

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

Amazing very detailed explanation , superb

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

Great video, Kevin! 👏🏻😁

@wonga07 6 лет назад

Thank you Kevin. I'm learning so much from your tutorials!

@KevinPowell 6 лет назад

Awesome Stephen, so glad to hear that :)

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

When you did the scale effect on the hover I almost wet myself. I never thought to use something like that to hid and display stuff. I would have defaulted to JavaScript automatically

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

I, too, have a fetish for code that works.

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

Hey Kevin this really is an amazing video thanks for taking the time to do this. I didnt know how to use ::before / ::after and now I do.

@surajitdas94 6 лет назад

Learned a ton. Thank you so much! lots of love.

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

WOW Kevin!!! Your videos are amazing filled with great information!!

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

Thank you!

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

Thank you, I have been coding for some time now but I'm not so great at css, these videos help a lot

@AminSkipper Год назад

Thank you very much, it was very helpful and I learned something new today :)

@chaudhary3394 5 лет назад

Its really 110% professional level 😆 I really like your channel

@joeldcanfield_spinhead 5 лет назад

Excellent explanation, Kevin. I've done all kinds of tech training, and I struggle with some of the tutorial channels because they're good at tech, but teaching, not so much. Nicely done.

@KevinPowell 5 лет назад

Thanks Joel, glad that you like my approach to teaching :)

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

Thank you, it was explained very clearly and not too fast. I am just starting out on CSS.

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

Glad it was helpful!

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

Thank you so much for this. It is extremely helpful.

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

I normally do server side tinkering but really enjoying this. it's like magic being revealed to me, haha. I didn't know i had this much power at my fingertips. Cant wait to craft some not-so-ghastly UIs soon. Thanks

@tan.435 3 года назад

That quote....i saw them on so many websites i didnt even knew it was that easy ..thx

@imanqoly Год назад

I never forgive myself for not having found your videos so far

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

All of your content is awesome....best in web development

@OLDACCOUNT_notfireman Год назад

Sorry if I’m 4 years late, I’m very fortunate to found this hidden gem of the internet. Absolutely great content! I build websites and I’m always confused on & ::before elements, you just earned a subscriber.

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

Great, exactly what I needed. TXS !🚀

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

GREAT, Kevin! I am tickled to learn how to do tooltips with CSS instead of JS. I'll be using that a lot. Thanks!

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

I really learn something! Kevin Thank you so much !

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

I loved the video but realized it is WAY advanced for me i am just learning about css, so i need to watch your easier stuff. Keep up the GREAT work! Can anyone suggest things i should work on first?