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

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

[@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]

🙏🙌

[@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

[@Neoxphuse]

Kevin, you are my hero. Thank you for explaining this on a step-by-step basis and the reasoning behind every single line. I understand way more CSS even though I've been using it for a long time. That is detailed oriented. These are #valuevideos.

[@toby-green]

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

[@studentu05]

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.

[@toddfishhuman4307]

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]

Overflow hidden usually

[@stripedgoat]

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!

[@nikkihstokes]

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

[@digwillhachi]

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

[@Gearyco]

🙌

[@rickdugmore]

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

[@Gearyco]

🤭

[@zdenekholy2634]

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]

You're welcome!

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

[@altecrete]

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]

💪🏻

[@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]

🙏

[@eucalyptech]

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

[@YasienSarlie]

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

[@mubindidit230]

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

[@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.

[@ReubenHochstetler]

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

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

[@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?

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

[@osvaldoodon]

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

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

[@OscarObians]

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

[@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.

[@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]

🙏

[@TexasWatchman]

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

[@yousefihadi86]

Very helpful and informative! Thank you.

[@davidwalls2304]

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

[@MPOMarketingPowerColombia]

Just Beautiful !👍 so amazing learning

[@geoffmartyn]

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

[@fleurdurham5272]

Wonderful - incredibly valuable content, thank you Kevin :)

[@fabiamc]

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

[@Gearyco]

Will do!

[@JaysonRivest]

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

[@Gearyco]

Happy to help!

[@azuzaazuza]

Great lesson, thanks Kevin!

[@Gearyco]

My pleasure!

[@bikimel-directes]

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 :/

[@bikimel-directes]

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.

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

[@AmandaLucaseu]

Super video Kevin - wonderfully explained.

[@justinsideris]

Another golden nugget of dechumpification. 👍

[@suzannebaker8053]

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

[@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

[@tjveach]

Very very good, extremely handy

[@NOALNOM]

Very nice tut indeed Kev, thanks for your time!

[@Gearyco]

Very welcome

[@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.

[@Max-repUk]

Tremendous content as always. Thank you Kevin!

[@Gearyco]

My pleasure!

[@danieldk9433]

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]

kzbin.info/www/bejne/pqLKpquMd8ZkbtEsi=eymjcxpl0Ped2aaL

[@GeorgeMavrommatisgmattis]

Αmazing!!! Kevin you are a css genius

[@varidenes]

Kevin! This is phenomenal! :)

[@Gearyco]

🎉

[@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.

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

[@DDesigner123]

Your a good teacher..

[@Gearyco]

I appreciate that!

[@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…😅

[@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?

[@vaniarensi7627]

The portal to a new dimension 🤯

[@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

[@ocbroadband]

Great Stuff.

[@t.t.2977]

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]

Add Overflow hidden on the section

[@t.t.2977]

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

[@rauljauregi6615]

Great content! Thank you!

[@Gearyco]

My pleasure!

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

[@OneBrokeBloke]

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]

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.

[@iXecurity]

Amazing tips thanks

[@Gearyco]

Happy to help!

[@John.Rearden]

Elementor has the ‘spacer’ widget with gradients effect, and there is a good KZbin 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.

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

[@anaf4072]

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

[@Gearyco]

[@reufjaha123]

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]

🚨

[@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.

[@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.

[@bikimel-directes]

Sensei lms ( related to the previous commemt)

[@thewhiterussian138]

more gangsta gold.

[@ST-rq8jw]

Thnx

[@kappesante]

yeeeeeeey

[@TakuapaFriends]

hahahaha..blur... zero control... yeah... I feel called out. lol

[@kevinrittershaus9380]

You. Know. Your. Shit. That's all I got to say.

[@Gearyco]

💪🏻

[@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