This is Sasha and welcome to another CSS training video tutorial. In this video, what I’d like to do is share with you some more CSS tips and tricks so that way if you’re editing your business website, you know how to do it or if you’re learning CSS, it’ll help you out.
Today, we’re looking at CSS pseudo elements and elements are a little different than pseudo-classes, but they do some interesting things that can be very beneficial still, especially if you’re doing things like with font awesome of if you’re adding in custom bullets and things of that nature. Let’s take a look at how to use this and incorporate this.
How pseudo-elements work
Looking at the screen here, what you’ll see if I have a few different paragraphs or multiple paragraphs. The way that the pseudo elements work is similar to pseudo-classes but the elements they have two semicolons.
--------------------- HTML CODE ------------------
Welcome to My Website
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
These are my books and products
Thank you for visiting
--------------------- CSS CODE ------------------
p::before {
content: "...";
}
You’ll notice right here on my CSS code. There are two colons, not a semicolon, but two colons. So, double dots. What you do or typically what I used this for is, for example, you’ll go ahead and type content and then if you do the double dots or the quotes right there. What you could do is create something like, okay, like three or four dots at the beginning.
You save it and you’ll notice what it does is that if you do it before, it goes ahead and adds those few dots beforehand. If you have it after, you go ahead, and you see that right there, it adds those dots back.
--------------------- HTML CODE ------------------
Welcome to My Website
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
These are my books and products
Thank you for visiting
--------------------- CSS CODE ------------------
p::after {
content: "...";
}
If you’ve seen a WordPress blog where they have a summary and then you have a few dots right there, that could be created with a pseudo element like this where at the end of that paragraph or that summary, you have those few dots right there that says, you know, this is done or that is your little summary, go ahead and hot the read more button. That’s how you can do that.
Also, the other way or approach to go about doing this is sometimes you could use it for bullets, for things like font awesome, you know, you include the content right there.
I won’t show you with the font awesome at the moment just because I don’t the font awesome installed here but I will show you that here in a future video. In either case, this is how this works, you basically have the before, the after, you can do the first letter as well and when you do the first letter I can say color blue and font size let’s say 35 pixels so you could see right there, it just makes it a little bit bigger kind of like a book, you know, so you could do it in that way.
--------------------- HTML CODE ------------------
Welcome to My Website
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
These are my books and products
Thank you for visiting
--------------------- CSS CODE ------------------
p::first-letter {
color:blue; font-size:25px;
}
You could also do the first line is another variation so that it also does the first line and if I resize it, you can see it makes that change. That first line is a little bit bigger right there, okay? Or it’s blue or whatever color you want it to be.
--------------------- HTML CODE ------------------
Welcome to My Website
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
These are my books and products
Thank you for visiting
--------------------- CSS CODE ------------------
p::first-line {
color:blue; font-size:18px;
}
In either case, that’s how they work as far as the pseudo-elements are a concern and that’s how you use them within your page. Usually, I don’t use the first line or the first letter. I typically would use something like before, and in that case you would just type in the content, add in the quotes and you could even include the little thing that you want to add right there and there’s kind of like a small bullet that you could create or customize your bullet and things like that.
--------------------- HTML CODE ------------------
Welcome to My Website
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad Business Launch Pad
Business Launch Pad Business Launch Pad Business Launch Pad
These are my books and products
Thank you for visiting
--------------------- CSS CODE ------------------
p::before {
content: "> ";
}
You can see that when you select the paragraph, it works but you can’t select that because it’s created in a way like an image within CSS. You can’t click that and select that little element there because we are using CSS to generate that. In either case, that’s your pseudo elements example.
