What’s up everybody, welcome back to Page Building 101. In this lesson, we are going to talk all about pseudo elements, not to be confused with pseudo classes. We’re going to cover pseudo classes in the next lesson. This lesson is going to focus on pseudo elements, which are really, really fun, kind of magical, because they allow us to manufacture elements purely with CSS.
We don’t have to add HTML elements to a page we can just manufacture them with CSS. It’s like they’re not even real. That motherfucker back there is not real. But they’re there.
Right? That’s that’s it’s fun. It’s fun and and you know it gets you into a situation. It levels up your game tremendously because there’s a lot of people, a lot of web designers out there adding physical HTML elements to a page when they should be using pseudo elements.
And so you’re gonna not make that mistake. You’re gonna know when should I use real HTML elements? When should I be using pseudo elements? And they also allow you to style things that aren’t normally selectable.
Why don’t we just get into it? Why don’t we just get into it? So I’m gonna go ahead and share my screen here. And the first thing that we’re gonna talk about is what is a pseudo element.
Pseudo elements allow you to style part of an existing element that’s not normally selectable. I’ll give you examples of this, or dynamically place content before or after an existing element. And when I say place content, I really mean dynamically manufacture content like out of thin air. Okay.
These are very difficult to imagine, very difficult to conceptualize. So we just need to take a look at some real world examples. And I apologize because this is gonna be one of those situations where it’s a little bit like a fire hose. We’re back to the fire hose thing.
Put on your scuba mask, okay? But put on your best scuba Steve impression because you’re about to get hit in the face with a fire hose. It just is what it is. You can rewind, go back, practice, whatever you need to do with this video, but that’s about to happen, all right?
So the first two that we’re gonna look at are the before pseudo element and the after pseudo element. Two of the most common, two of the most useful pseudo elements, they allow you to dynamically manufacture new elements inside of other elements, and this is a very important distinction. Go back to the lesson where I said everything is a box. The biggest mistake that people make when understanding or trying to understand pseudo elements before and after is they think here’s my box and I say I want before or after they think it’s going to go before the box or after the box and that’s not the case.
It goes inside the box it just goes before other content or after other content that happens to be inside the box but that pseudo element is created inside the box. That is a critical distinction that you have to understand. Because when it comes to pseudo elements before and after, we have to become masters at manipulating them, positioning them, styling them. And if you can do that, and it’s not that hard, it’s honestly not that hard.
If you can do that, you are going to be levels above most people. All right, so here we go. Physical divider or pseudo element. Here’s an initial situation right off the bat that we’re going to see all the time and it’s a perfect example where many people do this wrong and then there’s people who do this right and there is an objective right and wrong here.
There is in a lot of builders, Bricks has one element or divi breakdance. Okay, all these builders, in fact a lot of them, encourage you to use a physical divider element. It’s right here, it’s called divider, and I can drag this onto the page, and let’s put it inside, or we’ll just put it between the two containers right here. Okay, so that is a physical divider element.
Now, the worst violation imaginable, absolute felonious behavior, prison time, right, rehabilitation, is if you just add these everywhere and you style them at the ID level. Imagine a website is finally finished and you’ve used physical HTML dividers. Okay, let me show you this in the DOM. Let’s go ahead and go to the front end right here.
And let’s go down and inspect this little divider right here, okay? And we’re gonna see it’s actually two DOM elements. It’s a div inside of a div. Elementor is probably even worse.
Elementor is probably four DOM elements, okay? A divi, probably four DOM elements. And you’ve used these things everywhere. And you’ve colored them at the ID level.
And you’ve set their height at the ID level. And then you decide, or Bev comes along, or Fred comes along, and they’re like, you know what, we need to change the color of those dividers and we need to change the thickness of those dividers, right? And so now what do you do? Now what do you do?
Well, you’re living the chump life now, the ultimate chump life. You’re going, every single divider has to be changed manually, okay? We don’t need a physical element in this situation. In fact, I have argued that these dividers should not exist.
I hide them. I remove them from my bricks and stalls, okay? Here’s a clear example of why they’re problematic. Another reason why they’re problematic.
So I just duplicated it and put one between this one and one between these two elements right here. Now imagine I move this element right here, like I want it to be up there. The divider doesn’t go with it, the divider, there’s nothing intelligent about this, the divider doesn’t know that it’s supposed to be dividing that thing from the other stuff, it doesn’t know now that there’s no divider right here, it just gets left behind. And so moving one element requires you now to go and move another element, which is sometimes hard to select in here, and you just gotta move it manually or if I duplicate this element I have to go duplicate my divider and then actually move my divider.
It just requires so much manual work. It’s not scalable. It’s not maintainable. It’s not intelligent.
It’s just it’s just dumb. Okay it’s just dumb. So don’t use this. Don’t don’t do this.
This is not a situation where you should be using physical HTML elements. It’s where you should be manufacturing elements out of thin air that are actually intelligent, that you can actually manipulate and you have global control over, it’s scalable, it’s maintainable, it’s all the good things that we know and care about and love, okay? So what I’m gonna do is I’m gonna select, we’re just gonna dive in, okay? I’m gonna select this box right here.
Remember, I’m not adding an element to the page, I’m leveraging existing elements, but I am going to create a new class for our divider. We’re going to call this a pseudo divider. Okay, why? Because we’re using a pseudo element.
You could call it divider, you can call it line, you can call it whatever you want, right? I’m just going to call it pseudo divider to remind you that it is a pseudo element. And then I can do this in Bricks right here, the state pseudo classes area. You can do pseudo elements up there as well.
I stay out of that section I just write CSS for this and I think it’s important for you to understand the CSS that’s going on. Alright so I’m gonna write the word root which again references my class name. It’s just like writing pseudo divider. There’s no difference I’m just writing the word root because it’s faster okay and this only works in Brics so if you’re writing your own CSS it’s good practice to just write the class name that you’re targeting.
But I’m going to write the word root, and then I’m going to do a double colon. So pseudo elements use double colons, pseudo classes use single colons. That’s a distinction between the two. We’re using the double colon, and we’re going to say after because we want the divider by default to become after, to come after the other content.
So then I’m going to open my styling. Now there’s a few things you have to think about declaring. One that you absolutely have to declare, which is content. All right, so content, and then I’m going to use quotes.
It can be double quotes or single quotes, doesn’t really matter here. Content can be blank, or you can put stuff in here. You can put an A, and look what appears on the screen. Hey, you want to get fun with this?
Let’s go to Emojipedia, Emoji, Emojipedia. Let’s just do smile. Smile, if I could type it would be better. Let’s do a cat, a cat with a wry smile.
I mean, why not? So let’s come in here, drop our emoji. Look, we got a little emoji right there showing up after our element. You can put any content in here that you want to.
You could put a background image in here, an SVG in here, you can do a lot of stuff with this. But we don’t want content for this particular pseudo element, we just want a divider, so we’re going to leave it blank. But even though we don’t want content, we have to declare blank content. You have to do that.
It will not show up. It will not work. Okay? So that’s the first thing.
Think in your mind, content. The next thing you want to think is dimension. Give this thing some sort of dimension because it doesn’t have any dimensions by default. It’s width is zero.
It’s height is zero. Okay? So I’m going to go width of 100%. Why?
Because I want it to take up the entire box. Height is going to be more or less in this situation, it’s thickness, the thickness of the line. So I’m going to say two pixels, not 23, two. And you still don’t see it.
We gave it content, we gave it dimension, you still don’t see it. Why? Because it’s transparent. Okay, it also needs to have color.
So think content, dimension, and color. All right, so we’re gonna say background color, and we’re gonna say red. I just say always use a bright, ugly color so you can see it on the screen and it makes it super, super, super obvious.
Okay, so save, and I refresh, and now I have a, I’ve just manufactured a divider out of thin air. Now let’s go inspect this, and let’s see what actually happened here. So I’m gonna open that div, and I’m gonna see right here I can see the element it is the after element and it is just sitting there and I can see down here the styling that was attached to it okay so it didn’t exist before I didn’t add any HTML elements to the page you never saw me add any HTML to this page what did I add I added CSS to a class so this class is what created out of thin air this after element. That mother fucker back there is not real.
And it happens to look like a divider because that’s how I styled it. All right. Now let’s look at just right off the bat. What do we get with this?
So let me go ahead and let’s make this a real, you know, divider color. So let’s do shade light. All right. I’m going to go ahead and hit save.
Let’s refresh. There’s your shade light divider. Perfect. OK.
Now watch how this is more intelligent. So if I take this, I’m going to call this divider. I’m going to take this container and move it down here. So it came all the way down here.
Look what happened. The divider came with it because I want the divider to these like lives with that element. Okay. Now we can also manipulate our divider.
And this is where BIM modifier classes come into play. We didn’t talk a lot about modifier classes when we covered BIM, but now you’re going to learn. You’re going to learn today about modifier classes, okay? And watch how absolutely handy this is.
I’m going to move our divider back up here. Watch if I duplicate that element, guess what? Now they both have dividers, and how those dividers are positioned is completely up to me. It can be totally manipulated.
Watch this. I can come down here to my pseudo element after, margin top, and I can say content gap, right? And now it just gaps itself out away from the rest of the content. I’m in complete control of the position of that thing.
That’s actually the fourth thing. So content, dimension, color, and then position. If you nail those four things, you’re going to master pseudo elements, okay? All right.
So I’m going to take away this margin top for right now. I’m going to go ahead and hit save and let’s take a look at a way we can modify this. So one thing is maybe I want the divider on the top and not the bottom. So I’m going to say pseudo divider.
I’m going to create a new class double dash top. So I’m modifying it to say this is a top version. It’s one that comes on the top of an element instead of the bottom of an element. And whenever you’re modifying a class, you’re going to use both of them together in combination.
I’m not going to declare all these instructions again. They’ve already been declared. I already created the pseudo element. All I’m going to do is now modify the element.
So I’m going to come down here and do root after because we’re using an after element for this. And the only thing I need to modify is its position. And I just happen to know that the container that I’m working with is a flex container. And most of the containers that I’m putting this divider on are going to be flex containers.
So I’m just going to use the order property. And I’m gonna say order minus one, and it’s going to take that divider to the top. Why? Because only this box has the top modifier class on it, pseudo divider top.
If I take that away, it goes back to the bottom. So anytime I want this positioned on the top, I can add the pseudo divider top class, modifying it to be on the top instead of the bottom. And now I save, we go check that out. So one’s on the top, one thing is that is inside of that box.
What if we want the divider to appear as if it’s extending outside of the box? How can we do that? Well, let’s take a look at that. One is we’re going to, we don’t want this to happen on every divider, we want it as an option.
All right, so I’m going to do pseudo divider. What am I doing now? I’m making another modifier class and I’m gonna call this wide, pseudo divider wide. And what I’m gonna do is go to root after, I’m not gonna declare content dimension, all that stuff.
Well, actually dimension is what we’re changing, but what I’m not gonna do is copy all this stuff over again. Remember the base pseudo divider class has all my shared styling. The modifiers only contain what I’m modifying. In this case, instead of width 100%, I want to modify that to something else.
So I’m going to go width and I’m going to say calc, and we’re going to do 100% because we do want it to be the full width of whatever box it’s placed on, but we want it to go extra. All right. So it’s 100% plus something. And in this case, to do a percentage of the viewport.
So I’m going to pull out a VW unit. Go back and watch the lesson on units. See all this stuff is starting to come together, right? So I’m going to say eight VW.
I’m just pulling a random number out of nowhere. And look at what has happened now. So I’m going to go, look, it is wider than this one up here. You see that?
By eight VW. And that actually responds, it’s going to change its width based on the width of the viewport. Okay. All right.
So now problem. It’s not positioned right. Remember I said, content, dimension, color, position. I’ve got to master the positioning of elements in CSS.
I have a whole training that goes deep into positioning elements in CSS. I’m going to link to that in the description below. Highly recommend you go watch that, master positioning, because when you need to use pseudo elements, you gotta know how to position elements properly. Okay, so I need to center this element on according to the container that it is applied to.
And there is a CSS technique for centering, and it works like this. Transform, translate across the X axis. I’m going to go minus 50% and then I’m going to do a margin left. Okay.
So it went all the way to the left. Now I want to go margin left to push it back 50%. And that’s actually going to result in a centered, uh, element. Okay.
So now what I’m free to do is I can make this 18 VW if I want and it stays centered. I can make it 3 VW if I want and it stays centered. I’ll just leave it at 8 where it was. Okay so now it stays centered on the element and now I have what effectively amounts to a wide version of my divider.
I now have an option where a divider can be a hundred percent or a divider can be wide and it’s a hundred percent plus 8VW. And of course I have full control over what that wide version looks like. Even after I use it a gazillion times on a website, I can still manipulate this one little class, this one source of truth for how a wide divider behaves. Okay, so that is absolutely critical.
The other thing that I can do, let’s take off pseudo divider, pseudo divider wide, let’s come up here. I could, by the way, create modifiers for different colored dividers. I can do whatever I want. Ultimate flexibility, scalability, and maintainability.
I’ll also show you another magic trick that you absolutely cannot do with physical HTML dividers. Let’s say I wanted that divider, or a divider, to be on every bricks element, every single bricks, bricksy container, we’ll say. So these container boxes, every container in this section, and just this section only, I want to have a divider. Okay?
So because it’s this section in this section only, I’m going to style at the ID level. Now I could make a class for this. I could make a class for this. Okay?
In fact, let’s make a class for this. All right? So I can just say divide. We’ll do pseudo divider, and then I’ll do double dash all.
Okay, we’ll make a pseudo divider all class. And I’m gonna put this on a parent. All right, now, would you wanna do, you gotta think through exactly how you’re gonna go about this. I’m just giving you an example of the power of it, okay?
Where, remember, I can manufacture one element, I can manufacture elements on other elements in bulk, if I want to, and this is an example of that. So I’m going to say root and then I’m going to select all Brixie containers. Okay, so all child containers of this. I’m going to select them all and you could do this with the star selector if you want it.
So I can just do all direct children. Why don’t we just do that? Let’s just see how that works. Okay, so I don’t even need to target the Brixie containers.
I can just say select all direct children and then add an after element to all of those direct children. What do I need to do guys? Content, declare your content. Declare your dimension, width 100%, height three, we’ll do two pixels.
Declare a color, background color, just use red, just get something on the screen, right? Oh boy, a loud thunderstorm just rolled in. I’m gonna keep rocking and rolling, okay? I may get electrocuted at some point during this training.
Hey, hey, it was worth it, right? Okay, so background color of red and then, um, oh, we’re getting a little cache issue here, which we’ll take care of in just a second. I’ll do margin top of let’s do container gap minus content gap, because I know that’s probably going to auto center these just because I know, I know my variables. We’re going to go ahead and hit save.
We need to refresh the builder because we’re having a little cache issue there. Look at that. Look at that. Guys, guys, can you do that with physical HTML elements?
Oh, look at this. It’s on the last one and you don’t want it to be on the last one. Hey, no problem. We can make this even more intelligent.
So root on all of them. And then there’s actually a few ways to do this. We could say, we could say not, not the last. Oh God, we got to get into, we got to get into pseudo classes now, okay?
Last child, look at that. So I say not last child, then after, and it’s not on the last child anymore. It’s only on all of the others. Don’t worry about that.
You’re gonna figure that out in the pseudo classes training that’s coming next. I told you this was fire hose, okay? All right, so now look, my point, I’m just proving you a point. I’m not trying to teach you how to do this.
I’m proving to you that this kind of stuff cannot be done with physical HTML elements, okay? Let me change from background color red to shade light again. And then I’m gonna go ahead and hit save. Let’s go take a look at this.
Look at that. Absolutely beautiful like magic. And if I don’t want them, just remove the class. Now they’re all gone, nothing breaks.
But if I want them back again, I can just add that class again. Pseudo divider all there. They all are. There’s all the dividers, ultimate power, ultimate flexibility.
Now I’m going to remove that and we’re going to move on with our life. So I’m going to come down and now we’re going to take a look at this accent box effect. I want to add an accent box to this image right here. Basically a floating little angled border here and here on the on the top left corner bottom right corner okay so the first thing I’m gonna do is I’m gonna find my little area here and I’m gonna find that there’s a media wrapper in this card media wrapper and it has media inside of it I’m gonna attach this to the media wrapper but I’m gonna make a new class for it and this is gonna be called media accent okay so media accent is my class that is going to make these things appear out of thin air using a before element and an after element.
So i’m going to go to style guys. What are we going to do first? We’re going to say root before okay Content content. I want my content to be blank dimension width of 500 pixels height Of 500 pixels.
There it is. Color, gotta be able to see it, right? Background color red, make it ugly. Make it ugly and obvious, all right?
And then what was the last thing? Position, gotta position it correctly. Now I’m going to use absolute positioning. Again, watch the positioning training that I’m linking to down below.
It is absolutely critical. It’s not part of this course, because I already did it. It already existed before this course. All you need to do is go watch it and know that it exists, all right?
So I’m gonna position this absolute. And when I position this absolute, it is gonna take it out of the stacking context of this page and it’s gonna show up. It’s still there, but it’s right behind this image, okay? And when I, I’m just gonna give you a crash course and position absolute.
I need to anchor it to this container, to this class really, I need to anchor it to this class using position of relative. I know this is over your head, but when you watch that training on positioning, it won’t be over your head anymore. So position relative is effectively gonna catch my absolutely positioned element from flying all over the place. And it’s gonna act as an anchor, all right?
And so now what I need to do is position this absolutely positioned element using coordinates like top, left, right, bottom, okay, or inset is another option. There’s also logical properties for all these things, but that’s neither here nor there. We’ll talk about that later. Let’s just go top.
Now, do I go on the positive number here or do I go the negative number here? And the answer lies in knowing where this element is already positioned. Is it inside the box, pop quiz, inside the box or outside of the box? You already know it’s inside the box if you paid attention earlier, okay?
So in order to get it outside of the box, I’ve got to go negative positioning, get it out away from where it currently is, right? So I’m gonna go top minus one M and look at it peak out the top right there. Look at it peak, okay? Now I’m gonna go left minus one.
And I’m going to get a peek out the left side of the box. This is absolutely fantastic. Now you’re like, Kevin, that’s still ugly though. Right?
Okay. No problem. Now watch what we’re about to do. We can manipulate this any which way we want.
We can rotate it, scale it. We get, we get, we can do so many things, right? What we’re going to do is just make it transparent again. So background color, transparent, and then I’m going to add a border to it.
It’s still a box guys. It’s still a box. I’m going to do a border left of two pixels, solid red. Look at that.
I’m going to do a border top of two pixels, solid red. Look at that. I’ve got my little accent exactly the way that I want it. Now, maybe I want 400 pixels and 400 pixels.
Now I just made it a little bit smaller. Maybe I do 300 and 300. There we go. That’s a little bit better.
All right, a little bit tidier, a little bit neater. Now I want this to be on the bottom as well. So what am I going to do? We’re going to copy this.
We’re going to duplicate it and we’re going to change the before to an after. And then we have another one of them to play with. Now all I have to do is position it. So instead of border left and top and left positioning, I want bottom minus one so it peeks out of the bottom, and I want right minus one so it peeks out of the right side over here, and then I just need the borders to be on their correct sides.
So border right and border bottom, just like that. Okay, now I hit save. Let’s go view this on the front end. Look at this nice little exciting little accent that we’ve added, and we have the power guys to add this to any container that we want.
Look, I’m going to come down here and I’m going to add it to this container right here. So we call that media accent. And I hit there and look at this one has an accent now. You can’t do this with physical elements.
God, come on now. And I could actually target all images on the page and do it with this. Now, one very, very important thing. Pseudo-elements don’t actually work on images.
So how is this working? Because I’m actually placing it on a wrapper. This is why I always recommend you put your images in wrappers, all right? Or another workaround here is if your image is wrapped in a figure tag, a figure tag does support pseudo elements as well.
But the plain old image tag does not support pseudo elements so if you try to add pseudo elements, you’ll have the content. You’ll be like Kevin I did I did the content I did the dimension. I did the color. I did the I did the position.
I did everything and it ain’t showing up Well, guess what? You can’t do it on an image champ Okay so you got to wrap that image in a figure tag or wrap that image in a div and then put the pseudo elements on That wrapper and you’re good to go. They will not go on the image by itself. Okay, but look I mean look at this I have the ability to just add these on the fly to anything that I want now.
And check this out. So I’m going to come down here, we’re going to finish this off, I don’t want it to be red. And now we also need to talk about organization, scalability, maintainability, efficiency. There’s a very important principle that we covered many, many times in this course called DRY.
What is it? Pop quiz, pop quiz. Why? If you didn’t get the why, if you didn’t say dry, you failed.
Okay. D R Y. Don’t repeat yourself. Guys, repeat, repeat, repeat, repeat, repeat, repeat, repeat.
I’m repeating myself all over the freaking place. So we got to do a little bit of a cleanup. Okay. We got to do a little cleanup here.
All right. So what I’m going to do first is I want to declare a color for this and this cleanup that we’re about to do is actually going to bring us in two different directions. Number one, how do we clean up the actual instructions here? And number two, when we can’t fully clean up the instructions into one instruction, what do we do?
And in that case, we have to use what are called locally scoped variables. We’ve already talked about globally scoped variables. Now we need to talk about locally scoped variables. A global variable is like my color variable, like instead of red, I can use, hold on, the Rix is freaking out on me.
Let me go out of this tab and back in. Okay, now we’re good. So let’s do var action. That is a global variable that is available to me anywhere, right?
And so if I made all of these var action, that’s a pretty good start, okay? Because I’m using variables, but it’s still not good enough. And I’m gonna show you why, okay? But a locally scope variable is a variable that only applies to a specific element or its children, right?
And so what I can do is here, I can define my own variables. So remember in a WP code back style sheet where we do colon, root, and then we define variables? Those apply everywhere. When I define variables on an actual class, it just lives with that class and its children.
It’s really, really, really fantastic. Okay. So for example, border color of this, of this, or I can say accent color, right? So we’ll just choose, well, I’ll do border color because that is, we’re using a border property.
So I’ll use border color. Now, why would I do this? Okay. Look, I have action, action, action, action.
I’m using a variable, but I’ve repeated the variable four separate times. If I decide, hey, I want that border to be black, I got to go black, black, black, black, like a chump. That is chump-like behavior, my friends. You could be like, well, Kevin, you’re using variables.
That’s not a chump. No, no, no. I just had to repeat myself four separate times. That’s felonious behavior.
That’s a misdemeanor right there. That is not a felony. It’s not a felony. That’s definitely a misdemeanor.
Okay, you’re getting written a ticket for that. All right. Now, what can we do better? What can we do better?
Well, we can come up here and say border color. And then we can say border color is black. Okay, if I can type properly today, it’d be even better. So border color is black.
And now I come down here and I say border color. And I only have to do this once. All right. And watch the advantage that I get.
This is a locally scoped variable called border color. What do you remember about variables? They can reference other variables. OK.
So border color is referencing the color black. So anywhere border color appears, think here’s what’s being inserted. Black. But the difference is, OK, what did I do?
What did I do? Var border color, var black. Because we lost our pseudo elements. Let me save and refresh.
Okay, we’ve got a diagnose here. What happened? What happened? Let me go to media wrapper, media accent style, come down here.
Oh, we lost a closing bracket. Okay, you need your brackets in CSS. All right, so now the difference is if I want that to go back to action, look, they’re all action now. I just changed it in one place.
I gave myself a single source of truth for something I had repeated. So if I really wanna clean up what I’m doing here, I’ve gotta look at everything that repeats over and over and over again. And there’s two different ways to handle it. One is to combine CSS, two is to use locally scoped variables.
Here’s how you can combine CSS, root before comma, root after. Again, helps to be able to type alright. So root before root after any styles I put in here are going to be shared between both of these elements. So now I look down here for shared content.
Alright, so I can come in here and I can say, well, the content instruction itself is shared, so I’ll put that there and I can remove it from here and I can remove it from here. We’re just talking about how to make this as efficient as possible, as scalable as possible, as maintainable as possible.
Best practices, okay? What about the dimensions, the width and the height? Those are shared between these two elements. So I can say width 300 pixels, height 300 pixels.
I can remove from here and I can remove from here. Nothing is breaking because I’m just consolidating my styles. Alright now the background color of the element. Background color equals transparent.
Alright so I’m going to remove this background color and I’m going to remove this background color right here. Now I’ve got the borders. Alright actually this position absolute is next. So let’s just drop position absolute up there and I can remove it from here.
Awesome. And I can remove it from right here. So look at how I’ve consolidated things. And what you’re going to find is the only things left should be the unique aspects of this.
Now, what else is here? Two pixel, two pixel, two pixel, two pixel. If you ever needed to change that, you’re going change, change, change, change, right? Now there’s many ways to write border.
I could use a single statement for my border. I could go into border width properties. There’s a lot of ways to handle this, but I’m just gonna quickly consolidate so that we can move on. All right, so instead of two pixel, two pixel, two pixel, two pixel, I’m gonna go back up here and I’m gonna say border width, border width, two pixels, okay?
And now I can replace all of my two pixels with border width. And I’m gonna come here, replace, and then I’m going to say replace, and I’m going to say replace. Okay? Has anything broken?
This one down here broke probably because I have a little typo. So, oh yeah, that too cannot be there. Okay, so that is good to go there. And now what I need is the solid.
All right? So border style, come in here, var border style, and then I replace here, I replace here, I replace here. Now the question is, am I repeating anything else? And it does not appear that I am.
I’ve got the top, oh yeah, the offset, offset. Ooh, man, okay. Border offset, all right. And we’re gonna say that that is minus.
That’s actually 1m. Are they all minus? Yeah, they’re all minus I’ll just do minus 1m. Okay, and then I can come in here and say that this is my border offset All right, and then I take this out and I’m gonna show you the power that this gives us You are gonna see the tremendous power.
Okay Everything is exactly the same. All right. Now, what did I do here to switch the media wrapper and the content wrapper? Yeah, we don’t want to do that.
OK. So let’s go to the front end, see what we have. Look at this. Now, let’s say I want to make the accent.
Remember, I’ve used this maybe 1,000 times across the website. This is the scalability, maintainability side of this. I’ve used this 1,000 times. I want all of them to get a little thicker, from 2 pixel to 3 pixel.
Instead of hunting in the code here, I can just come to this locally scoped variable that says, hey, the border width is what? Two pixel, three pixel. They all just got thicker. Let’s make it five so you can see or let’s make it 56, whatever.
Now you can see exactly what’s going on. It’s very obvious. Then we also need to talk about z-index here in just a second obviously. But I’ve now changed that in one place what if I want this to be dashed what if I want it to be dotted look how it’s changing everywhere at the exact same time because of this locally scoped variable I’m gonna put it back at solid and then what if I want to change the offset let’s put this back at a 2 just you can see an offset change maybe we want less offset maybe minus 0.
5 M they all get closer now I say 1. 5 m they all get further away okay maybe I wanted to be positive they move inside and then I can make sure that they show up on the top I mean look at this effect look at this effect look at what I’m able to do on the fly just manipulating so easily because of these locally scoped variables okay all right now let’s talk about z-index a little bit. Let’s put this back to where it was, minus 1m, and let’s do that 50 pixels. So now you see that one is on the bottom and one is on top.
Actually, they’re behaving a little differently on this element than they are down here, because we need to force some z-index happening. Remember, z-indexes are layers, are layers. Go watch a previous example of PB 101, previous lesson. What I’m gonna do is say that the Z index of this, I always want these things to show up on the bottom for what we’re doing.
So I’m gonna do a Z index of minus one. I’m gonna hit save and we’re gonna refresh. And now they all show up in the back. They all show up on the bottom layer.
And look how I made that change right here to the shared styles of the before and the after. Oh, let me show you one thing with this, okay? About ID levels. I defined these before and afters, this media accent with a class, right?
But I can actually manipulate individual instances by going to the ID level. So watch, I’m gonna go, and by the way, I can actually use the power of my locally scoped variables to do this. So watch this. I’m gonna turn off the class, which means I’m styling at the ID level.
Root references the ID and I go to my before. Maybe I want just that one to be black. Okay so I come in here and I all I have to do is redefine the variable because an ID definition variable, an ID variable, is going to override a class variable just like any ID styling overrides any class styling. So what I’m going to do is I’m going to go get my border color variable and I’m going to redefine border color on the ID and I’m going to say that you are black and now that is a black accent.
None of the others are black just this one. Okay I can also do my border width right. I can say that oh you’re two pixels. I can also do my border offset of minus 0.
5 M. It’s going to get a little bit closer. I can do, what was the other option that I had available to me? Border style, right?
So I can go border style dash. Bam, now it’s a dash. Look, I’m only affecting this one individual instance of this before pseudo element others maintain their global styling from the classes. The power that you have, the flexibility, the scalability, the maintainability, it’s absolutely tremendous, okay?
People that use physical HTML elements to do this stuff are psychopaths, okay? They’re psychopaths. That’s all you need to know about them. They’re coming in like absolute marauders, marauders to this website, okay?
You are gonna be more intelligent, more delicate, more thoughtful, more, this is so much more, you can all agree, right? This is a much more elegant approach to doing this kind of stuff. I kid, don’t get your panties in a twist, okay? All right, last thing that we’re gonna do with the before and after, we need to add an overlay to this is a very common thing, right?
So I’m gonna say that my custom overlay right here, I can do a custom overlay. How are we going to tackle this? Well, we’re just going to use a before pseudo element. So we’re going to say root before.
What do we have to do first guys? Content, content, right? Then we’re going to do dimension. In this case, because I’m just manipulating a blank box for right now, I don’t even have to go width and height, okay?
Cause I’m going to absolutely position this element. So we’re gonna go position absolute, which means I gotta come up here and anchor it on the main element. So we’re gonna say position relative. And then what I’m gonna do is I’m gonna use inset, which is top right, bottom left, all tied together in a property called inset of zero, which is gonna make it stretch across the entire thing.
And this is, we’re gonna see a limitation here of pseudo elements. Notice that because I’m using a before, it stole the before that was already here. We can’t have two befores, you can only have one before. We’re stealing one to do our overlay.
Now, we’re going to use a background color of red, make it obvious. Root before content, we’ve got content, position, dimension, color. color, what else do we need? Maybe Z index of one and there is our pseudo element right there.
Maybe it does need. Oh, because the other one had a width on it. We have to override that with width and height. So if I wasn’t already using a before pseudo element, it’s actually.
Just assigning styles to this. So what I actually want to do is take off media accent and now my custom overlay is free to just do its thing. That was a little bit confused.
We’re combining, you know, it’s combining styles more or less instead of removing one element and adding another, it was combining styles together. If you want that accent to stay there and you want an overlay, what you have to do is add an additional wrapper. Okay. That’s a little bit more advanced.
I’m not going to get in there, but it is an overcomable situation right you just add an extra wrapper every time you add a wrapper you get two more pseudo elements to work with one more before and one more after so I’ve got an overlay guys right but I can’t see my text so we’re that’s another problem we’re gonna have to fix and it’s opaque so what I need to do maybe is do an opacity so we can do opacity of maybe 0. 5 okay and now I have an action or a red colored overlay. Let’s do a black overlay. All right, there’s a black overlay.
Problem is it’s on my text. One more thing that we can do, little bit of a trick. I talk about it more in the positioning. This all goes into positioning.
You have to understand how to reset and manipulate stacking context in CSS. And we do something called isolation of isolate is going to rework our stacking context. This actually needs to be minus one, sorry. I want it to be on the bottom layer, okay?
And you see here that if I don’t have isolation isolate when I put it on the bottom layer, it goes behind the background image. And I don’t want that to happen. So I’m going to rework the stacking context of this box, and it’s going to put things in the right order. And now I’ve used a before pseudo element to create an overlay.
This is a very, very, very common technique for creating overlays. All right, I’m gonna save that. All right, so let’s come down now and let’s talk about the next one, which is completely different. So reset your brain.
This is just completely different, but it’s very simple. Very, very, very simple. The next are very, very, very simple. These are the hardest ones before and after, by far, hardest ones to understand, okay?
These are the easy ones. These are low hanging fruit. This is a layup, finger roll off the backboard, my friends. This is so easy.
So these little bullets, and it doesn’t matter if it’s a bullet, a number, a Roman numeral, whatever. The marker, it’s called a marker. It’s a marker on the front of a list item, okay? These can be manipulated with the marker pseudo class.
In fact, if we go inspect this and we come down, we inspect this list, you’re gonna see when I open the LIs, there’s something sitting here called a marker. It’s not a real element. It’s a pseudo element, okay? All right, so I can manipulate these with the marker pseudo class.
So I’ve got a little class here that I’m calling marker custom. I’m gonna go to style, I’m gonna go to CSS, and we’re gonna style that marker. Now, what is the marker on? It is on the list item that is inside of this list.
So when I write root, I have to select the list item. You do that by writing L I for list item. Then I can select its marker because remember the markers inside of the list item. So I got to select the list item.
Then I can select the marker. Then I’m going to come down here and it’s so simple. Color red, right? And now they’re going to be red.
Have you ever wanted to know, have you ever wondered, how do I change that marker color to something else? Now, if you just did root li and you did color red, let’s see what happens. All right, let’s take away the marker effect. The text is red and the marker is red, which that’s fine.
Now they’re all red. But what if you want the marker to be a different color? What if you wanted the marker to be red, but the color to be black? So now see if I change black on the LI, they all turn black, but now with the marker pseudo element, this can be an independent color.
Have you ever wondered how to do that? Now, you know how to do it. But that my friends is not all. I can actually go to root LI and I can say, you know what the list style here?
List style, none. I don’t want bullets. I do not want bullets. I want emojis.
Let’s have some fun. Emojipedia, let’s go in here. Let’s grab this little heart, okay? You ever want a heart emoji as your bullet?
Okay, so you come down here to marker, and guys, what do we have available to us still? Oh, we have a content, right? And we can pop in our little emoji, and there’s our heart emoji right there. And we can say that the padding on the left is going to be 0.
5 M. And look at this beautiful little list of hearts. This is using the marker pseudo element, okay? You can do lots and lots and lots of really cool stuff with the marker pseudo element.
Last one we’re going to look at, and then we’re going to button this training up because it’s going on an hour. I’ve already recorded other videos today. I’m losing my voice. And I hit you with enough of a fire hose.
Let’s just close this thing out with some easy wins. More layups, more little flick of the wrist. Okay. First letter and first line.
So here’s a paragraph right here. Can we style the first letter of it? Well, let’s go to the Dom. Let’s inspect this little sentence right here.
All right, so I’ve got a paragraph and then all these letters inside here make up the paragraph. Is this letter selectable? Is that, can I target that somehow? Well, what a lot of people might do, here’s the chump way to do it.
They come in here to this paragraph and they put a span around it. They add physical HTML. So they span, span like this, and they might do a span class of drop cap, something like that, right? So now they have a physical span tag with a class of drop cap, and then they can come down here and they can say our drop cap, we’re gonna style that, colors red, font weight is 700, and then float left, we’re gonna make this a little drop cap action.
Now it’s only a single line, so this isn’t gonna look that great font size of 150% so there’s our little drop cap action right but what did that require I had to go add HTML to the page that’s scalable is that maintainable can I do that to multiple paragraphs at once or only paragraphs in certain areas or no no no no that’s all manual chump-like behavior, straight out of chump-ville, okay? What I want to do is I want this to be much more dynamic. I want to know, I want to have the foresight to be like, oh, I don’t need a span tag for that. Let’s go take this span tag out.
Take it out, take it out, take this out, bam. That is a non-selectable element, so we think, but my friends, you can select this. Okay, where’s my drop cap? What class did I use?
I don’t even remember what my, what was my span? Is it still down here? And then, no, I deleted it. Okay, so we’ll just say drop cap.
All right, so we’ll just make a class called drop cap. And then I can come down here and I can say root first letter. Now I’m using a pseudo element of first letter and I can say color red Color red let’s type properly font weight of 700 float left okay, and then font size of 150 percent okay, and there we go we get a little drop cap no spans needed and guys I can apply this anywhere look I can come down here and say drop cap this I don’t need to add any spans or any other nonsense going on. No, no, no, no, no.
It’s just a class using a pseudo element and I’m good to go. And I can do that with the first line as well. So let’s go highlight, highlight first. I’m just making up classes on the fly.
Come down here, root, first line. And then I can say font weight is 700, color equals action. Now check this out. If I use the span on the first line of text, do you know how hard it would be to manage this if I need to add line breaks and things like that?
So I’m gonna come in here and after this little comma, I’m gonna line break this. Look at how it just dynamically goes, oh, I’m not on the first line anymore. So I don’t need to be styled like that. Look how like, you can’t like, come on, look how flexible and easy this is.
So you’re gonna have pseudo elements like first letter and first line and marker and before and after. And you’re using these like a pro throughout your website. This is what I’m saying. Your game is going levels, levels above everybody else who are throwing around, I mean, these psychopaths throwing around span tags, throwing around divs everywhere, right?
People trying to make these little accent things, they’re throwing around divs left and right. We got divs coming out our ears. No, no, no, no, no, that’s not what you want to do. What about those dividers after?
These absolute savages putting in physical divider elements, hundreds of them, through a website. Even more savage by styling them at the ID level. Oh my gosh, no, no, no, no, no. Just, it’s all fun and games.
They’re not really savages. They’re not really psychopaths, okay? What we need to understand though, is that there are objectively better ways to accomplish certain things. And that’s the whole point of this course.
I’m trying to show you the objectively better way to do things so that your life, mainly your life, we don’t have to care about, don’t care about what anybody else is doing. So your life is better. So your life is easier. So your sites are better.
We’re done with this episode. I’ll be back soon. I’ll be back soon. Peace.
