The Best Pseudo Elements Training You'll Ever Watch (Re-Usable, Unique Pseudo Elements)

Рет қаралды 10,835

Күн бұрын

Lots of sites use pseudo elements for little design accents. The challenge is: how do you add them quickly (like with a single class) while still being able to manipulate them individually based on the context of where they're being used?
In today's training I'm going to cover:
• How pseduo elements work
• How to create pseudo elements (::before and ::after)
• How to assign pseudo elements to a re-usable class
• How to use negative z-index without issues
• How locally scoped variables work
• How to use locally scoped variables to make individualized changes to pseudo elements
• And more!
And guess what? You can even take this a step further and use data attributes to manipulate the pseudo elements.
This is a tutorial that you'll get value out of regardless of your skill level. It's great for beginners, but it has stuff even advanced users can put to use.
Note: While this tutorial is done in Bricks Builder, this a CSS technique that works in any builder or even non WP websites.
Automatic.css - automaticcss.com
Frames - getframes.io
Inner Circle - geary.co/inner-circle/
Link to last weeks 2-hour deep dive on my new site: kzfaq.info99MFGUHrakE
Everything you need to know about positioning in CSS: • Relative, Absolute, Fi...

Пікірлер: 127

@Gearyco Жыл бұрын

Thanks for watching! If you can toss up a like and drop a comment, it's always appreciated!

@quickend01 Жыл бұрын

My father always said, "you don't know anything unless you can teach it!" Your lessons are always packed with just great, generous amounts of value, and this one is no different. Your interesting, simplified breakdown, is truly life-changing for older beginners, trying to adopt a new mindset, skill, and knowledge base. Thanks again!

@Gearyco Жыл бұрын

Love that!

@markthomas8542 Жыл бұрын

I can't believe I get all this value for free! Since I've been following these trainings, my knowledge and skill has increased exponentially. Please keep 'em coming, Kevin.

@Gearyco Жыл бұрын

💪🏻

@ernestoserrathmontecino8914 Жыл бұрын

Same here

@eucalyptech Жыл бұрын

Thank you Kevin for sharing those golden nuggets. Such great value !

@mubindidit230 Жыл бұрын

Tremendous value. You are right, I have never seen this much in-depth and easy tutorial on Pseudo elements. Thank you so much :)

@suzannebaker8053 Жыл бұрын

Awesome tutorial, packed with all kinds of valuable nuggets as always, thank you!

@mauricegraham2191 Жыл бұрын

Mind....blown! You have no idea how much value this one video created! (Theme song "A whole new world...." currently playing in my mind. Thank you!

@davidwalls2304 Жыл бұрын

Great video Kevin! My collection of CSS notes/concepts/tricks is growing.

@yousefihadi86 10 ай бұрын

Very helpful and informative! Thank you.

@geoffmartyn Жыл бұрын

This was absolutely brilliant. Thank you so much for making these videos. Amazing!

@toby-green 7 ай бұрын

Love this - a really simple method of spicing up designs without using images.

@YasienSarlie 4 ай бұрын

Thanks young man. This was a good lesson. May you be blessed ❤

@Ramnathk Жыл бұрын

Take my Like for living dangerously by running tutorials on your live site! And a huggeee thank you for being this fountain of knowledge!

@AmandaLucaseu Жыл бұрын

Super video Kevin - wonderfully explained.

@nikkihstokes Жыл бұрын

I'm totally going to start doing this with everything, Great technique, thanks for sharing!

@ZaneWinberg Жыл бұрын

So grateful for your excellent training here! I went through and did everything step by step, and it works like a champ!!

@Gearyco Жыл бұрын

Glad it helped!

@victorrenevaldiviasoto9728 Жыл бұрын

Parametrize everything! A great lesson that I learn with functional programming: it allows you to keep central control & clean code. A great lesson as always Kevin, thanks!

@WannaBeMuzkant Жыл бұрын

You know what?... That was the best lesson on pseudo elements. I've been watching w3school like an idiot for 1 week and I still don't know anything. With this tutorial I am completely reborn :)

@Gearyco Жыл бұрын

🙏🙌

@ReubenHochstetler Жыл бұрын

This training was so helpful! I haven’t used locally scoped variables but am going to in the next project!

@osvaldoodon Жыл бұрын

Excellent video. Thanks for such a great technique 👏🏼👏🏼👏🏼

@MPOMarketingPowerColombia Жыл бұрын

Just Beautiful !👍 so amazing learning

@NOALNOM Жыл бұрын

Very nice tut indeed Kev, thanks for your time!

@Gearyco Жыл бұрын

Very welcome

@Max-repUk Жыл бұрын

Tremendous content as always. Thank you Kevin!

@Gearyco Жыл бұрын

My pleasure!

@studentu05 6 ай бұрын

I'll take a few months off work in order to watch all your videos 😅. Can't stop anymore. So nicely explained and very knowledgeable.

@azuzaazuza Жыл бұрын

Great lesson, thanks Kevin!

@Gearyco Жыл бұрын

My pleasure!

@JaysonRivest Жыл бұрын

Amazing! You always give the best instruction and encourage us to work smarter not harder! Thanks!

@Gearyco Жыл бұрын

Happy to help!

@tjveach Жыл бұрын

Very very good, extremely handy

@gbolahanolajoyegbe7302 Жыл бұрын

Absolutely awesome tutorial Kevin. Overgasted and flabberwhelmed. Really opened my mind to better and more efficient development. Please more indepth and dumbed down tutorials like this. I am sure a lot of us are more of visual learners and we would gain a world of knowledge from these. Thanks so so so so so much. God Bless.

@Gearyco Жыл бұрын

🙏

@ocbroadband Жыл бұрын

Great Stuff.

@TexasWatchman Жыл бұрын

That was like drinking from a fire hose! Awesome job. Masterfully done Kevin.

@stripedgoat8470 Жыл бұрын

This looked so complex when looking at it on the frontend, but it's actually super simple and effective! Thank you so much for putting out all this content 🙏🏼🤩

@Gearyco Жыл бұрын

Glad it was helpful!

@ernestoserrathmontecino8914 Жыл бұрын

Thanks very much Kevin Geary, this is an excellent video and mind blowing. I am currently learning CSS and this video really made me understand better Pseudo (::before and ::after).

@Gearyco Жыл бұрын

You're very welcome!

@varidenes Жыл бұрын

Kevin! This is phenomenal! :)

@Gearyco Жыл бұрын

🎉

@zdenekholy2634 7 ай бұрын

OMG ... came here to have a quick look how to do "pseudo" in Bricks (coming from Oxygen) ... and boy did I stay till the end. A bit overwhelming with all these variables, but certainly it pays off to do it that way. Well worth the effort. Kevin, such a great video to learn from ... THANK YOU.

@Gearyco 7 ай бұрын

You're welcome!

@OscarObians Жыл бұрын

My CSS IQ just went up a few notches. Thank you Kevin!

@rauljauregi6615 Жыл бұрын

Great content! Thank you!

@Gearyco Жыл бұрын

My pleasure!

@rickdugmore 7 ай бұрын

Dude, you're amazing. I think I love you.

@Gearyco 7 ай бұрын

🤭

@fabiamc Жыл бұрын

Huge value as usual! Really hope you will make a video about your Perfmatter setup for optimization :) Thanks a lot!

@Gearyco Жыл бұрын

Will do!

@isaurasotoca Жыл бұрын

Nice video, Kevin! I guessed how locally scoped variables work, thanks to seeing a lot of them in Frames components 😊 Would like to see a following up tutorial on how you animate this with GSAP. Maybe an advanced InnerCircle tutorial?

@altecrete 10 ай бұрын

Such a character, you make tutorials interesting and your manner keeps viewers engaged. From an old school C and C++ developer, its interesting to see how much further they have taken the CSS language. All though the terminology you use is a bit different, like for instance , a variable that holds the value of the name/location of another variable is called a pointer variable. Not that it matters to much. It only helps when your students work in large teams and referencing code structure at a communication level with others in different units. eg. Front end team talking to back end, etc. Thank you for all your hard work in creating this educational source and making it all open source. BIG UP and Kudo's to you in making this available to everyone including those with no income or means to afford this first class resource.

@Gearyco 10 ай бұрын

💪🏻

@justinsideris Жыл бұрын

Another golden nugget of dechumpification. 👍

@VerbiVeritatis Жыл бұрын

Your style provides tremendous confidence to your audience. I use pseudo elements all day in my day job that has little to do with web design (re: advertisement) but picked up on some really cool ideas. I need a linkable TOC to all your videos/posts that I can reference later on a click. A GearyPT, if you will 😂

@Gearyco Жыл бұрын

🙏

@digwillhachi Жыл бұрын

I hit like before I even watch because I know its gonna be gold.

@Gearyco Жыл бұрын

🙌

@DigitalDesigns1 7 ай бұрын

Your a good teacher..

@Gearyco 7 ай бұрын

I appreciate that!

@iXecurity Жыл бұрын

Amazing tips thanks

@Gearyco Жыл бұрын

Happy to help!

@pixelnthings Жыл бұрын

It's such a tremendous value for free, Kevin....I can't imagine what's inside the Inner Circle...and now I want to join. Really, want to improve my skills🙂

@Gearyco Жыл бұрын

Come on in!

@quickend01 Жыл бұрын

I have been a member for a while now and consider myself a total Novice. I can't imagine a better community for anyone wanting to learn. Kevin is incredible and seems to attract people of the same spirit and energy. I would recommend it to anyone trying to learn, improve or keep up.

@vaniarensi7627 Жыл бұрын

The portal to a new dimension 🤯

@toddfishhuman4307 11 ай бұрын

This is such a thorough and insightful tut Kevin - thank you so much! Now I'm trying to figure out how to not blow out my margins on mobile. Media queries?

@Gearyco 11 ай бұрын

Overflow hidden usually

@vickydeclasca Жыл бұрын

Supercool just what i meed dor the next website!! Thank you kevin!!! Wondering if in inner circle are issues about sensei

@Gearyco Жыл бұрын

Haven’t ever used it :/

@vickydeclasca Жыл бұрын

Is because a client already is using it , son i have to mantin it. It’s a pretty simple lms that does the job , and its fee open source. Thank you.

@azuzaazuza Жыл бұрын

Great value, I just run into a strange problem with the before-bg variable. No matter what I do, the shape just disappears while the after works just fine with the after-bg variable. Sorry, forgot a closing ; on the previous line.

@OoohBoi Жыл бұрын

Awesome dude, thanks! The only thing I was wondering about is why you used custom CSS to style up pseudo? You could simply style everything up by using Bricks' Layout, Background, Transform panels (isolation prop excluded). Essentially, every custom class (including the custom class + pseudo) can be styled up via the Bricks panels. Even the CSS filters. Cheers!

@Gearyco Жыл бұрын

It’s way slower and less efficient and less organized.

@anaf4072 Жыл бұрын

Between Kevin Geary and Kevin Powell that's all you really need to learn about css.

@Gearyco Жыл бұрын

@keviincosmos Жыл бұрын

Kevin, would if you also had chapters in the video. Way easierto navigate and when I come back to this look at it again 😊

@Gearyco Жыл бұрын

I normally add them. Forgot!

@ST-rq8jw 9 ай бұрын

Thnx

@liviustanciu165 Жыл бұрын

Another great tutorial, Kevin. Thanks. Can you tell us how did you do the hero bg showing those lines? Is it a jpg or is CSS?

@Gearyco Жыл бұрын

It’s just a repeating pattern image

@RoyceWraith Жыл бұрын

Another Great video. qq: If you had a huge site that needed 15+ Post Types and 30+ posts per type, would you structure it differently? How would one manage all those post types on the admin side panel? Thanks

@Gearyco Жыл бұрын

Depends on what they’re for.

@alexander-van-aken Жыл бұрын

Great one! Didnt knew about inset and neither isolation! So that makes it great already, but with the details about the locally scoped variables it even became more clear! So basically i create a mater css file with a bunch of classes like blur, dropshadow and what not, add it into wpcodebox its repository to reuse it where I want as long as I add the vars to the id, im good to go. What more scenarios could be added to the master css file? Looking for a determination for wether I go this route or the acss class route. I guees it has to have a need for a pseudo classes right?

@Gearyco Жыл бұрын

What you're describing would be globally scoped variables. Those are different.

@alexander-van-aken Жыл бұрын

@@Gearyco ok maybe I explained it wrong. In your video you explain that root inside a class is basically the replacement for the class itself. So .blur::after and .blur::before within the class. so I meant that im going with .blur with the vars in wpcodebox and inside the class in the builder I leave the root::before and root::after stuff since that is not relevant for inside wpcodebox right?

@olithompson5218 Жыл бұрын

Could someone explain in more detail what Kevin meant by saying "pseudo elements are impacted by what goes around it".? W3 schools say that pseudo elements (pseudo classes) only work on block-level elements. So the height should be dictated by the content and the width dictated by the parent. So how does flex change anything.? Would just like to understand this part of the video.. 11:30 / 49:37

@chrisgoll7152 Жыл бұрын

Hi Kevin, I wanna thank you for all the great stuff you are teaching us! I’m also a member of your fantastic Inner Circle Community and it offers an incredible value 🎉 I’ve got a question here. I can’t get the pseudo element to become visible, if I add the class to the image. I’ve tried it in Bricks and in Oxygen… when I take the class to the div which wraps my png, then it works. What am I doing wrong?

@Gearyco Жыл бұрын

Pseudo elements don’t work on images. It’s a CSS limitation.

@chrisgoll7152 Жыл бұрын

perfect 😊 then I got it. I made it through this whole ‘crazy’ variables stuff 😊 with the use of a little chocolate 😂🎉 and now I’m convinced that every project needs it’s pseudo element variables to play around with…😅

@Rollclick Жыл бұрын

This may be a dumb question, but if I create variables outside of the bricks builder window, do I place them on my CSS style sheet or WP Code box?

@Gearyco Жыл бұрын

I put mine in codebox

@John.Rearden Жыл бұрын

Elementor has the ‘spacer’ widget with gradients effect, and there is a good KZfaq video on it on their channel, and this same effect can be achieved without using a line of code and in minutes. This was unnecessarily complex. Sometimes your videos make me love the simplicity of Elementor more and more.

@Gearyco Жыл бұрын

The spacer widget would be the absolute worst way to implement this. Horrific for scalability and maintainability.

@John.Rearden Жыл бұрын

@@Gearyco It seems you watched the wrong video on spacer. The title of the correct video is ‘Create Vibrant Gradients Background in Elementor’ it uses the Spacer element.

@danieldk9433 6 ай бұрын

Interesting episode but I don't understand one thing. Why create a local scoped variable? What are the benefits of this? I can achieve the same effect: Create a new section, add the .blur class, copy the css code (like You did in 42:24 but You copy local scoped variables) with before and after functions (which you did 24:48) and paste it into the section with the .blur class deselected - just change the parameters (degree of deviation, color, etc.) .

@Gearyco 6 ай бұрын

kzfaq.info/get/bejne/pteXqNuHp8eVaKM.htmlsi=eymjcxpl0Ped2aaL

@OneBrokeBloke 4 ай бұрын

12:00 unsure why absolute works like this. We have not defined anything as relative, so should it not align from the whole DOM instead when absolute?

@Gearyco 4 ай бұрын

There was a version of Bricks where they set things to position relative by default. I can't remember if this was one of those versions or not. But then we persuaded them to fix that because it caused so many issues. But absolute elements will also somewhat behave relatively until they're given inset coordinates. I'd have to go back and watch the full video to see what order I did things in to really know.

@Arm1q Жыл бұрын

Is it that much better from just overwriting only those properties which I need? Like add blur to a new element and then in css do :root .blur::before {color: red}. I don't see much difference, it also has some advantages like no creating of a lot of local variables, no need of remembering them and also they can become a bit hard to read.

@Gearyco Жыл бұрын

The variable way is far more efficient and more organized. You’re welcome to try it both ways. Multiple classes is far messier.

@vickydeclasca Жыл бұрын

Sensei lms ( related to the previous commemt)

@martinwessel7137 Жыл бұрын

I was like " I CAUGHT THAT ROTATE ERROR" - I've learned more the last 5 months with your videos than i've learned my previous 6 years as a developer... I'm sure people learn more with these small mistakes than just a "robot" talking...

@Gearyco Жыл бұрын

Love it!

@t.t.2977 4 ай бұрын

Hey Kevin, great job as always. :) I have a question, I followed your tutorial video, but with your css code I always get an overflow on the entire website.: %root% { isolation: isolate; } %root%::before { content: ""; width: 30rem; height: 30rem; background-color: var(--action); position: absolute; left:; bottom: auto; right:; display: flex; z-index: -1; transform: rotate(10deg); filter: blur(70px); opacity: .2; } I really don't know what I'm doing wrong or what else needs to be done to make it work. Best regards

@Gearyco 4 ай бұрын

Add Overflow hidden on the section

@t.t.2977 4 ай бұрын

@@Gearyco Ah ok, I should put the hidden on the section, I only tried it with the individual containers. But what's still very strange is that I have to enter the hidden again for mobile even though it was already grayed out. Regardless, it's probably a bug, but entering it later helped. Thank you Kevin for your great support and what you do for the community.

@adameklun Жыл бұрын

Hi, thanks for the tutorial! But I don't get it to work. If someone has an idea why, I would really appreciate the help. I don't get the pseudo-element to show up in the preview or on the actual site. I have done a new class named: blur. And I have clicked on the pseudo-state to write in the CSS code. Is there something I missed? root::before { content: ""; height: 40rem; width: 40rem background-color: red; display: Flex; position: absolute; }

@Gearyco Жыл бұрын

Raw Images don’t support pseudo elements so make sure your image is using a figure tag.

@ocratest Жыл бұрын

@@Gearyco Another nugget! Thanks!

@kappesante Жыл бұрын

yeeeeeeey

@ham2956 Жыл бұрын

Join inner circle, Kevin needs a new shirt and cap 😅

@Gearyco Жыл бұрын

I’ve got like 12 hats but this one is so damn comfortable!

@ham2956 Жыл бұрын

@@Gearyco no dig. My wardrobe is pretty consistent.

@reufjaha123 4 ай бұрын

Kevin, this is very nice and helpful tutorial, keep going. My wife is gonna divorce me because she said I watch these videos more than I talk to her. :D hahahahaha"

@Gearyco 4 ай бұрын

🚨

@MrMrTyree Жыл бұрын

Kevin I noticed you actually typed out the variable @16:30 like a chump LOL instead of using the Variable Expansion feature. Joking. Great video though

@Gearyco Жыл бұрын

The first version of variable expansion had a bad bug that broke pseudo element strings in the CSS, so I have PTSD. I'm slowly building my confidence back in using the expansion feature in the CSS field. Lmao.