Today is we are going to discuss about the pseudo elements. So basically, a pseudo elements is used to style specific parts of an element. So how, first of all I'm going to come up with this we can easily get the code I'm seeing I have some like I'm seeing I have some paragraphs, not some one paragraph. One thing, this is my para and copy this variable. Okay, okay, a lot of that. eliminated Okay, now I'm saying that Sorry, I'm saying that I have.
I'm going to comment this so you can also easily get the cold now I'm seeing all that was sink. single paragraph in my file or on the file, I'm seeing paragraph I want to add the code to the page refresh the page. As you can see, this is the two lines of code. So now where is the code is, now I'm saying okay, because the I'm using, I'm saying, I have come in this morning. Okay, so now I'm saying I have three, three lines of code. I'm saying only add the color.
First line. Color equals All right, go to the page, refresh the page. Now as you can see, it's adding the color at the first line and the first line, okay? So now in this way you can use or you can define your pseudo element selector. Okay? pseudo element.
Okay, so now i'm saying i have a paragraph. Okay, now I'm saying, just add a color of a first letter. So how can you do that? I'm saying this, we can easily get the code. I'm saying I have, okay. I'm going to create another paragraph.
Okay, here I'm saying class on this pattern, my path. Okay, this is the pattern. And now I'm saying this is pattern one. This is paragraph one. Now I'm saying this is the one consolidate, I'm thinking this is the para two. Now I'm saying just add the first letter equals two, right.
Now in thing color equals two, go to the page refresh the page. So now as you can see, it's just adding the color. The first letter, okay, so now, you can also use the after and before for suppose I'm saying I have two paragraphs para one paragraph. Now I want to add the image before the paragraph This is how can you do that? I'm saying That's also use. Also use the before property to an image how I'm saying the content content is make sure you have to use the URL to set your image.
So I'm saying the image is logo dot png, make sure go to the page refresh the page. So you have added the image here. I'm saying the vert is going to fix it with a refresh the page. Okay, now I have to find some teeny image. Image. width is not okay, now I'm saying I'm Rich 5050 by 50 So it's a 50 by 50 with a 50 by 50 image.
It's a 50 by 50 image now I'm seeing in the CSS folder assets I'm seeing IMG, so it's a JPEG image 50 by 50. I'm saying this is the JPEG image. img and this is a jpg, go to the page, refresh the page. Okay, so now as you can see, it's adding color. So large file so that's why it's showing you like this, but you can add the image like this for suppose if you want to add after the element, just use the off the property to the page. Refresh the page.
Now as you can see, it's adding the paragraph after your element so you can use the before and also the F after pseudo element or you can just say that these are the pseudo elements. Okay, so now, I think this is enough for today in the next lecture we are going to cover some other topics. Thank you for