PB101: L17 - Pseudo Elements

[@Gearyco]

Mandatory Side Quest: Watch this training on positioning elements: kzbin.info/www/bejne/rXLZm31ppZqcia8

[@websiltd]

Can you apply the accent box effect to divs / containers?

[@Gearyco]

yep@@websiltd

[@LupusDesign]

I know that Kevin says that repeating yourself is "chump-like behaviour", but I have said it many times before that Kevin is a natural teacher - some actual teachers never fully acquire the skill to identify with the learner. Kevin does! Another excellent description and application: learning by doing! Now to revise on "Positioning"! Peace! ❤

[@digitalgorithms]

This lesson just supercharged my CSS skills! I had a decent understanding of pseudo elements, but you really took it to the next level and filled in those critical gaps. Your explanation of positioning and efficiency was an absolute game-changer. I’m so excited to leave Chumpville behind and start creating smarter, cleaner designs! And that thunderstorm moment-pure gold! Just don’t get electrocuted out there, but keep bringing the lightning to these lessons! Thanks for the incredible boost! Let’s Keep It Rolling!

[@jybevox]

CLICKABLE IMAGE WITH AN OVERLAY - At 42:00, during the "image overlay" section, if your image is a clickable image, you will NOT BE ABLE to click on it anymore. Solution: if you encounter this problem, you can add [pointer-events: none;] in the [root::before] element to prevent the overlay from interfering with the mouse click, and so, keep the image (that lay below) clickable. Thank you Kevin for this video on pseudo elements!

[@grasshopperweb]

these pseudo elements really break the "boxes within boxes" feel of most websites in a way that border radius just can't. Definitely adds a pro touch. I'm terrified of how many hours I already know I'm going to spend fiddling around with making custom little pseudo elements :P THANKS A LOT 😝😝

[@NotAddicted1981]

I come prepared to these lessons, I wear safety glasses and rain gear. Great stuff

[@Gearyco]

💪🏻🙏

[@ThierryC-te3rx]

Kevin, the internet will remember You as The Guy who made web design great again. Thanks for your efforts.

[@Gearyco]

You're going to win so much you're going to get sick of winning. It's gonna be yuge.

[@ThierryC-te3rx]

@@Gearyco Trying to get ready for that 😅

[@ThierryC-te3rx]

@@Gearyco The change has started. Building my 1st site with Bricks (ex-Divi, currently-Breakdance) Big learning curve but big lessons learnt. Adding pseudo-elements so re-watching the course again. Thanks a lot 🙏

[@rubengarciajr]

you are a natural born teacher. thank you for the training!!

[@Gearyco]

Thx!

[@ka7ana]

I know "DRY" but THANKS again Kevin!😆 You literally save and elevate my life ❤🧡💛💚💙💜🤎

[@Gearyco]

Appreciate you!

[@kevinholloman]

18 videos in, and I've learned more than any paid course has ever shown me! It helps that I already have the LTD of Bricks.

[@petrajovkov8622]

Kevin, thank you!!!! Thank you for PB101 and ALL of your trainings. You are a real MENTOR to me!!!! Please keep on doing what you are doing 👍👍 ACSS & FRAMES ( & Frames for FIGMA soooooooon.....) = all I need ;-)

[@varidenes]

Kevin! You are a phenomenal teacher! Thx!

[@Gearyco]

Thank you 🙏

[@davidwalls2304]

Another great lesson in the series. I'll need to rewatch the positioning video, well more likely most all of the videos to keep everything fresh in my mind, but a worthwhile time investment.

[@ted-e-baer]

Thanks, Kevin, for this pseudo elements lesson. Going to re-watch this a second time. Looking forward to the next tutorial/class (pun intended) on: pseudo classes. Thanks again, Kevin.

[@Gearyco]

It'll be right ::after this one.

[@ted-e-baer]

Eye sea what you did there, Mr. Geary.@@Gearyco

[@derekshort]

@@GearycoI.C. what you did there. 😉

[@benjaminpau]

From somebody who doesn't have any experience in CSS or coding background, your videos help me a lot in understanding the basic that one should practice! Thanks a lot!

[@davidwalls2304]

Kevin, I wanted to add faint lines between blocks I added to a FRAMES element. After scratching my head for awhile not wanting to be a "chump", I remembered how you use pseudo elements like a magician. After rewatching this PB101 episode, the confusion cleared.

[@Gearyco]

Good to hear!!

[@MrImperios]

You are the best, since I found you on YT I only watch your videos and the other i did watch before are out. Thanks for all

[@rafikiAli]

You may have a gift for teaching. I applaud you for recognizing it and maximizing the impact through effort, determination, and intentional mastery of your craft! *Thank You*

[@matthewolding9427]

I've been building websites for years and I've learned something from every single PB101. This episode the distinction between pseudo elements and pseudo class and they way they are written ( :: vs : ) finally clicked for me. Great stuff.

[@Repko01]

Kevin, you are Mr Beast of CSS, helping us all to grow. Thank you very much!

[@vishalsahi3832]

Amazing! Your dedication to creating high-quality, and informative content is truly admirable ❤🙏

[@Gearyco]

Thank you so much 😀

[@TheJimMcDermott]

Refactoring, it's not just for server side code. I'm digging the lessons inside lessons!

[@uzzamafroz]

Thanx Kevin, Best explanation of pseudo elements I have ever got.

[@Gearyco]

Glad it was helpful!

[@kareem2928]

Well done, Thx Kevin.

[@eucalyptech]

Great tutorial on Pseudo Elements ! Thank you Kevin 😀

[@koqpe13]

Спасибо, отличный урок.

[@mikkey0001]

It's so obvious once you know👍🏼

[@filmgenius2]

I was not expecting 0:35 😆.

[@Gearyco]

Gotta keep you on your toes.

[@derekshort]

@@GearycoWho is the physically attractive angry woman? 🤔 We need to know. Lol😅

[@Gearyco]

@@derekshort Do you live under a rock? Lol. knowyourmeme.com/memes/that-motherfucker-is-not-real-plane-woman

[@derekshort]

Good video. Thanks! I already knew about these but it was a good reminder. I will have to actually use them to impress clients.

[@mclouds888]

Thank you, Kevin, as usual! t The marker styling was unknown to me; how can you zero that left margin the bullets usually have? In your example, they are left aligned with the text above them.

[@Gearyco]

Anything can be done with margin/padding. A lot of times it's on the ul instead of the li --- just have to inspect and see where it's coming from.

[@stphnmwlkr]

Kevin, great lesson. Since this was a introductory course and not generally focused on Bricks, what are your thought on using the Bricks pseudo element features versus hand coding in the CSS block versus using something like wpCodeBox to manage the CSS? I have an opinion (more the wpCodebox route for reuseability outside of Bricks), but curious to know yours.

[@Gearyco]

I hate this bricks pseudo area. One of the worst parts of bricks IMO. I write custom CSS for all that.

[@mihaiandrei97]

The moment I saw the lady on the plane meme, I just had to press the like button lmao

[@Gearyco]

💪🏻

[@jzea5605]

My god, I have gone from chump, to not-so-chumpy after a week of binging this playlist (I loved it so much I;m gonna be watching them again to let it soak in - I even learned the word lede haha). Love it Kevin! I was keen to know your thoughts on the "Stop using code snippet plugins" by Adam Lowe on KZbin as I am massive fan of your plugin blueprint for Wordpress but it includes a code snippet plugin like many I've seen across KZbin land.

[@Gearyco]

It's generally not a problem. If you have a site that requires a higher level of security it's a good idea to remove it. But for most projects it's a non-issue, especially if you're just using it for CSS/SCSS.

[@jzea5605]

@@Gearyco nice. Thanks for getting back so quickly.

[@John.Rearden]

Good lesson

[@jenniferward6821]

Excellent tut

[@Louis-C-online]

Every one of your videos is a pleasure to watch thank you ! One question tat popped up : you created an overlay using a pseudo element, and in Bricks there's already a native option to dot it i the builder. Any advantage of using one way or the other?

[@Gearyco]

Using the css box is way better workflow efficiency

[@KeshavDaBhutra]

Love your video as always this is super useful

[@carlosp.1846]

The problem later on is to remember in what wrapper I put the code of this pseudo element.

[@user-cq1dm9xm8m]

Just a suggestion. You can zoom in your website a little bit so it will be clearer for those who use small screen. ❤

[@user-cq1dm9xm8m]

By the way I am on L06.

[@user-cq1dm9xm8m]

Oh, I fixed it! Just set conditions for my theme style!

[@bjoernzosel]

wow! That's awesome!! The others are psychopaths 🤣 divs coming out of our ears 😂😂

[@simonkerridge]

Is this the last PB101 video? I am getting withdrawal symptoms waiting for another! 😉

[@Gearyco]

No, 3-4 more coming

[@simonkerridge]

@@Gearyco Phew! 😉👍😀

[@abdulwaheedorg]

It's super good. Is there a way to set the width and height to the half of the image height? Let's say we need to add this class to a smaller image, then how we can adjust it to fit according to the height of the actual element?

[@Gearyco]

% is possible too

[@LapoCerchiai]

amazing lesson Kevin! Thank you very much! Just a question: what is the best way to parameterize a class? In your videos you do this by inserting the custom CSS inside the element. Or maybe it's better to write them all in Bricks custom CSS? But that way I have to go out and do it "blind" every time...

[@Gearyco]

Not quite sure what you are asking?

[@LapoCerchiai]

@@Gearyco Hi Kevin, thanks for the quick response! for example, at minute 21:07:00 you created a ".media-accent" class and then entered the values in the "CSS -> Custom CSS" field of Bricks Builder. Is this the correct procedure or is it preferable to create and insert the values for the class created in Bricks -> Settings -> Custom Code?

[@RavishankarAyyakkannu]

Excellent lesson. Thank you.

[@laufal]

Thank you @Gearyco. May I ask how you "remove elements from your Bricks install"?

[@Gearyco]

Just hide them. There’s a snippet in the inner circle.

[@rickdugmore]

I really was a savage psychopath, wasn't I? What have I done?

[@zuber7358]

"That mofo back there is not real" 😂

[@martinbuno3990]

Kevin, many thanks for this video. I want to ask you, I have a problem with responsive display (especially on mobile) with pseudo elements. Can you please advise how to do this?

[@Gearyco]

Not usually, no.

[@davidyisrael403]

Doesn't Bricks have pseudo elements in their CSS parameter settings? eg. image overlay or background overlay?

[@Gearyco]

Bricks pseudo element area should be avoided. It’s not well done.

[@sophiemulders]

Would it be possible to get a highlight style with this. Like ; ‘Duo tone Heading’ in which the word Heading gets a background color with some padding? If yes how would this work?

[@Gearyco]

Wrap the word you want to style in a span tag and give it a class like .highlight

[@filmgenius2]

Suppose I had the text "Hello I'm a short Sentence" and I wanted to style the letter "A" using CSS to apply a slight rotation. How could I achieve this? This is just for illustration purposes.

[@Gearyco]

Wrap it in a span tag and style the span.

[@derekshort]

How do you align the text after the big red W? The following characters look pushed up.

[@Gearyco]

You don’t, you just keep aligning the W to wherever you want it to go. I would recommend using a longer paragraph and then you can see exactly what needs to happen.

[@jerryb6728]

Why are you using pixels for the media accent and not rem or en?

[@Gearyco]

Because I don't want it to scale with the users root font size. I want it to stay the same size at all times.

[@jerryb6728]

@@Gearyco got you I guess I d have to practice enough to know when you want something to stay the same size in mobile as it is on Desktop... This must be one of those situations

[@Gearyco]

@@jerryb6728 px/rem isn't about mobile, really, it's about what happens when the user adjusts their root font size.

[@mmaayta82]

And I thought I knew pseudo elements 🤔

[@wanja8461]

hahahaha the mf is not real. Well, but she is, so I am sorry for her having such a public bad day. Wish her well.