Pseudo Elements in CSS

Hello guys! Welcome to our series, CSS. In our last segment, we had seen about CSS, Pseudo Selectors like Hover, Active, Visited and with it we had seen properties like nth-child and first-child. So, guys I hope that in the last segment, as many Pseudo Selectors we have seen. You must have performed practical on all those selectors. If you have faced any difficulty in performing the practical or you have any doubt. You can tell us on forums.learnvern.com. We will rectify all your issues and we will try to revert to you. Our today’s segment is on CSS Pseudo Elements. Now, the question will be what are these Pseudo Elements. Usually, when we use a selector for example Hover, which is our selector. What we do in it is usually we use one colon, for example our selector, its name and element, then colon, after that whatever are our properties, for example Visited, Hover, etc. So, what is the use of Pseudo Element here? So, Pseudo Element can be defined as, as it is written here. A Pseudo Element can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. So, usually when we apply any Pseudo Element, there is a specific behavior of every Pseudo Element.  Accordingly, it applies its CSS. For example, we want that  before any element a specific CSS is applied or we want that after that element any specific CSS is applied. After that or before that it is applied. So, all these selectors that are there, related to our elements. We can apply them through Pseudo Elements. Like it is written in the 2^nd line, unlike the Pseudo-classes, the Pseudo Elements are used to style the specific part of an element. Pseudo classes means these, our Hover, Visited, etc. With it’s help we select it and after that with the help of Class, we apply different CSS. But in Pseudo Element what happens is ;on any specific part of Element CSS is applied. For example, I want that my element that is there, in its half portion the CSS is applied and not in the other half. All this we can do through Pseudo Elements. clear guys!  Whereas the Pseudo Classes are used to style an element. So, the difference here is that, with the help of Pseudo class we can style the entire element. Whereas with the help of Pseudo Element, we can style the content inside it, specifically, partially, completely or any portion. Here, the Syntax of Pseudo Element has been given. How we will work upon it. So, like it is written here, selector and then Pseudo Element. Let’s say selector means that I have taken Div, then D1 will come, if I have taken H1, then H1 will come. Then Pseudo Element, means the Pseudo Element that we will learn today, from that whatever we want to apply, that one. And related to that whichever property we want to apply, that we can give. For example, font family, font size, background color, etc. We use the double colon notation, that means the 2 colons that are there. You can see that even here. They are there in the Syntax as they have been defined in CSS 3 that Pseudo Element has to be defined with the help of double colons only. If we are using any event like Visible and Hover, for that Focus is also our event itself, for all those we use a single colon. Here, only one colon will come. Like Selector and then one colon and after that Selector, Visible, Focus and all we will write. But when we work with Pseudo Elements at that time, we have to use double colons here. The double colon replaces the single colon notifications for Pseudo Element. Got it?  It means that earlier there was single colon in CSS 1 and CSS 2 but now we use double colon. Pseudo Elements, now which all elements are our Pseudo Elements? So, it is written over here. The 1st is first letter. What is the use of it? It selects the 1^st letter of the text. First line, so what it will do is, it will select the 1^st line of the text. Before, it means that if we have any element and if before that we have to apply any CSS. After, means that if we want to apply after the element. Selection means that if we have an element, on its selection…the selection that we do by moving the cursor, that is what we call selection. So there are different properties and behaviors of our Pseudo Elements. We can generate a few things with its help. Like the 1st is our First Letter. What is the work of First Letter? It can be applied only; it has been written here. It can be applied only to block- level elements. okay!  So first, we can only apply it on the block level element. Instead of supporting all CSS properties, it supports some of the CSS properties. First letter doesn’t support all CSS properties. So, which all it supports, is given us in the list here. Like color. Then there are font related properties like style, family, size, color, etc. Means font related. It supports margin. It supports border properties, padding properties, background properties, text related properties like shadow, transform, etc. And then there are other properties like vertical-align. So, you can see that we cannot apply the transform properties. Color change, like gradient properties we will learn ahead. That we cannot apply. Animation, that we cannot apply. Here, you can see that there are a lot of properties in the list that First-Letter uses. But there are certain things which it doesn’t use. So, we will understand the 1^st letter with an example. So, for that we will open Sublime text. HTML, Example, we will write it in this way. okay! First line, if it is related to our 1^st line, it should be First-letter. Save, we will run the program. Okay. Now what we will do is we have an example to perform this. First of all, for example we are taking a heading tag like “welcome to Learnvern ''. And we will take one more, for example we will take h2, in h2 we will write “This is an example of, (double colon) first-letter pseudo element”, save, reload. So, we can see here Welcome to Learnvern. And here, “This is an example of first-letter pseudo element”. Okay. So, now what we will do is, that h1 that is there, we will 1^st apply style, on this style. We will give the CSS to or 1^st letter of h1. So, 1^st of all, let’s say that I take body. In the body, I take text align- center. Okay, so our text has come in the center. Next, I will take h1, so h1 then :: “first-letter”. Okay. You can see that the selection is not performed. Usually, when we write Hover and all it automatically gets selected, we see the options. But here in the first-letter, we didn't get the options. It means that based on the text editor which you are using. So, in our Sublime text elements, this Pseudo Element is not selected. In h1 I want that, this h1 that is there. What is its 1^st letter? W. So, I want that my W should look a little different. For that I will apply few properties. For example, let’s take “font-family”, I will change it. “Lucidia Calligraphy”, the spelling is correct. Font family we have changed. I will take font size- 20 pixels. Specifically, my only one word will look big. Sorry, I will take 3cm, so that it looks bigger. After this, I will make the color red and I will also give a text shadow. For example, 5pixle, 5pixle. Or else we will take 8pixle, 9pixle. And we will take the shadow color green, if it is red. So, this is my shadow. Got it, guys!  Now, this is our property of the first letter of h1. Now, we will give some property to h1 as well. For example, h1-colour- blue. So, this h1 property, the first-letter that is there, I will comment it and run it. So, you can say that “Welcome to Lean Vern” in blue color. Now, I will uncomment this commented property. And I will reload it. So, you can see that, this “W” that is there. My fist letter of my h1. That has been changed. It had got some CSS. Which all CSS has been applied. Which all CSS that I applied, like I had to change the font-family. “Lucida Calligraphy”. There was a spelling mistake because of that…so my font has changed. It has got the shadow and color; the size has also changed. So, what has happened with the first-letter of Pseudo Element? My entire element h1- we styled only it’s 1^st letter. Like we saw, when we were reading it’s theory or description, what we saw is our Pseudo Elements that are there;  are used to partially style our elements. So, you can see that what I have partially styled is only the 1^st letter of the complete heading title. That means the 1^st letter of the complete element I have styled. So, this we can do with the help of first-letter. Next is our first-line. Means the multiple lines that are there with me. From that the 1^st line that I have. If I have to give styling only to that. I can make use of the first-line. Same as first-letter. First-line also few properties can support. Okay ! For example, color properties, font properties, background properties like color, repeat, image, etc. and few other properties like word-spacing, letter, etc. So, in our First-letter there are padding, margin and text related properties. All these things, you can see, are not supported. First-line related, all are supported. So, this practical also we will perform, of the first-line. What will we do for that? We will generate one new program. Okay. We will remove this. In h1, we will write “Welcome to Learnvern. This is a wonderful place to learn the programming languages in the vernacular language”. Save. This is our fist-line.html. So after the first-letter, came our first-line. We will run this as well. Okay. This is our program. “Welcome to Learnven. This is a wonderful place…”. This is written over here. We will zoom in a little, on 200. So, you can see that, this is our first-line, second and third, like this. Here, we will also do this portion “This is an example of first-line” Now, what we will do is, now our h1 and h2 has come. So, now in our h1, we will style only the first-line. So, for example, what we had taken here, font family, font size, color-red, and text - shadow. How Many were there, we are taking them as it is. Font size, we are keeping 1cm. Okay. And we will style h1. Color- blue. Save. Now, what we will do is, we will comment it. Okay, so our h1, we are getting in blue color. Now, I will uncomment this commented portion and I will run this program. So, you can see that my 1^st line is there, the CSS is applied  to that. It is not applied to 2^nd and 3^rd. But when I zoom it out. All my content that is added in the 1^st line, that line is getting that CSS. When I zoom in, how many lines are going in the 1^st line, I am getting the CSS there. So, here we can understand the use of first-line. In our view port, means in our device screen. In the 1^st line whichever content is added, only that much content will be affected by first-line CSS. Rest of the content… will be in a fixed portion. It means that if they go to another device and how much content falls down, to that the CSS is not applied. Like you are seeing on the screen, in the same way I am zooming it out. So here you can see “This is a wonderful place”. So, my statement was from this till the full stop. Still my CSS is getting applied to “This is”. got it guys!  So, this is our use of first-line. The CSS will be applied to only the 1^st line of our paragraph, heading, our element or as much content we have. We will go back to the slide. Next is our Before. The use of Before is that, if we have added any content. So, in front of that content, whatever content we have to add, we can do it with the help of Before. In before there is a property, like it is written here. Content, so what does this content define , what do I have to place with the help of my before. For example, I have taken h1, “Hi” and I applied before Pseudo Element. I will apply and I will write, “Hello” before the “Hi”. So, we will see it as “Hello Hi”. because  Before;  it adds some content before my html content. For before; content property is mandatory. For that as well we will generate a program. What we will do for before.  We will take the same program. Here, we will write “Welcome to Learn Vern”. That’s it. Only this much is there. We will add something in h3.(pause)  In the first line the “hello word'' is added using  before pseudo element” Okay. So, with the help of Pseudo Element we are going to add something in the 1^st line. So, what will we add. This is h1. I will remove it. What will come here “before”. Okay. So, as I said, content is it’s main property. So, here in the content, we will add “Hello, All”. And I wish this content should be seen in red color. So, it should be color red. And the rest of the portion of h1, that should be seen in blue color. I will save this, before.html. Okay. We have opened this in Firefox. We will zoom it. You can see here that “Hello, All”, this much portion has been added with the help of before. But welcome to  Learn Vern, I have written in content. “Welcome to Learn Vern” is added using my h1 tag. “Hello all” is added with before. Now you can see that when I am selecting “Welcome to Lean Vern”. It is getting selected. But “Hello All” is not getting selected. This is the meaning that what we have added with the help of before, that will not be selectable. The contains that we have added using elements only that will be selectable. Here, “before” will come. Okay. This is the example of before. In before we can add anything with the help of content. Exactly same example will be generated for after. In before, we are adding something in front of the content. In after what will happen is we will add some after the content. So, this is the difference between before and after. Before adds content head of text, element or statement. After will add it behind. So, what we will do is copy the same thing. Everywhere we have to…first-letter”, here “first-line”. In “before”, “before” and here “after”. And here also “after”. Here, I have “Welcome to Lean Vern”. I will add this through content. And I will add here “Hello all” ;space,  and here we will write “Welcome to Lean Vern” is added using after pseudo element. Save, after.html. And this is my after. You can see that here “Welcome to Learn Vern” which is there, that is added with the help of after, which is not getting selected. “Hello All” is getting selected. Here “after” will come. Here, we have an after pseudo element example. Here you can see that “Welcome to Learn Vern” is added after pseudo element. So, this is our before and after. The use of before and after is even that, if we are adding any content. Not only text but if we want to generate any icon on our own and add. Even that we can do. Let’s go to the slide. Selection, selection means like I had said, we can select something with the help of selection. Like this is my content in which I am selecting “Hello All”. So, my color of the selection is blue in the background. Even here you can see that the background is getting selected with blue color. If I have to change this, the background or selected portion color. That I can do with the help of selection. This pseudo element gives us facility to change the text color, background color of selected areas  and any other properties like cursor and outline.  We can do that with this. Even this we will see with an example. For example, I will perform one more thing here. “Selection”; even here “Selection”. So, I have taken h1. I want that the color of my selected area that color should look for example, red and that’s it, the rest of the color should look blue. So, here it will come “Hello All”. In this place, I will take this. okay!  We will remove h3. “This is an example of selection”. Here it will come “Welcome to Learn Vern. This is a wonderful place to learn programming”. Save and this is our selection.html. We will run this. So, this is our h1. When I am selecting it, you can see that my background is not visible now. But I am seeing the selected area color in red. That means what I am selecting, that I can see in red. But below as it is. Because here we have not given any selection CSS. So, my h2 will be seen as it is with blue background. But you can see that whatever I am selecting I can see that in red color.  Now, I want that, along with it, I should get the background color as well, the text should be yellow. Reload. Now, you can see that the background is yellow color and the text is in red color. So, this is our selection, how we perform the selection. So, here all our pseudo elements get over. clear guys!  But with the help of different selectors, we cannot only do this. Before and after selector we can generate a lot of icons with the help of it. I had said that initially. Let’s say I have got an example. We can see here. So, let’s say I want to generate a curve arrow. How can I do that? I will go in my after program and I will take one division here. I will add nothing in division. I will just put an id, “curved arrow” that’s it. Now, in this curved arrow, I want an arrow, at the end it should be something like this, I have to generate something like this. So, what will I do? That’s it, I will write only this much in div. Here, I will write “#curved arrow”. In curved arrow what all properties I have to add, with whose help the arrow is generated. First of all, I have to give it a position. So, the position should be relative. After that I have to give width and height to it. So, whenever you are generating any shape, at that time with the help of after or before. At that time, you have given the width as 0 and height you have to give as 0. So, now we are generating an icon or shape. Width and height we have given 0, 0. Now, since it is my icon, it will have few borders. So, if my icon is an arrow, what will I do? I will take the border for that. My 1^st border will come of the top. I am taking it some 10 pixels, “solid transparent”. Same I will take the border, right side one. I want to generate an arrow of this way, of right-hand side. I will take same for it, 10 pixels, solid and I will take the red color for it. I took 2 borders of the upper side and right-hand side. I have taken them both. I have taken them both and now I rotate them, as they are generated on the bottom side. So, that the arrow is generated this way, I will give it transform, rotate and I am rotating it on 10 degrees. If I save this. I will add margin here. Margin, 0 auto. And when we go here, this is our after program. So, we can see that we are getting an arrow generated on the below side. Okay. Clear!  You can see that we have given it a width of 0, 0. Top we have taken as 10. Right, we have taken 10 pixels. So, we have generated both sides of it and given it rotation. If I don’t give it a rotation, it will look in this way. This is my right-hand side border. And I have not kept any top border. So, I get these 2 with my right-hand side. So, I will rotate it a little so that I get this kind of arrow. Now, with the help of after, I will generate a curve here. So, what do I have to do for it? This curved arrow as it is, #curvedarrow::(double column) after, in this I will write the rest of the properties. Like we have said, writing content is mandatory. So, I have written content and I am not mentioning anything. Okay. What do I want before the arrow? So, I will give it a position here, absolute, since it is relative, this curve. I want to generate something with it. If I don’t give the position as absolute, it will get added anywhere here. The content that I will generate here. I want it here itself. So, the position, absolute. I will generate a border for this. For example, 0 solid transparent. My rest of the borders will be transparent. only border top for me would be 3 pixels, solid, we will take its color red itself. Border I will generate for it is radius, so that I get a curve. Border radius, I will take somewhere 20pixles, 0, 0. So that I get a curve only on one side. And in the rest of the places, I get as it is. So, the border radius is 20 pixels 0, 0.  How much down it should be from up. If I save it as it is, we can see that I am not able to see anything getting generated here. Save. So, I will give my position to it. So, the position should be top, -12pixles. After top will come left, from left, -9 pixels. Even now we are not able to see. After that I will have to give it a little width- 12pixels, height should also be 12 pixels. Okay guys! Now, we can see a curve getting generated now. I have to get that curve touch here, for that I will use the transform property. Rotate, 45 degrees, so that it touches. So, you can see that my curve has touched here.  So, we can see that an arrow is generated over here. So, you can see that I have added top and left property. So, it has gone a little up in a negative direction. Since I have given a height and width, it looks like this. It has changed more after giving 15 pixels. Here I have taken the border radius, if I comment this, you can see that I am getting a straight arrow, I am getting a straight line. I have to make it curve, so that is the reason I have taken radius here. So that it gets a little curved. So, you can see that with the help of after property we have generated an arrow. This will not be selectable as whatever we generate with the help of after and before, that is not selectable. So, this we have generated from after property. Another use of before and after is that if we have to add any custom icon or any image in our webpage. We can add that with the help of before and after. Currently, I have written it individually after div. If I give it class, Okay. Dot, save. Okay. Now, with the help of Span, I will add the class in h2. (pause)  Okay. So, here as per the height we are getting the arrow. But it had taken a total height of my content. So, it is not looking like an arrow but it has been added before my content as I have taken here span. After doesn’t mean that it will be added after h2. I have added it in my Span, so it is getting added here. If I keep it here. So, I can see it being added here. Because of h2, it is giving us the same height of h2. It is that, we can add it anywhere. If my height is looking bad here. I can make some changes with the width and height and generate it. For example, instead of 15px, I make it 50px. So, you can see that our line here increases. If I want an arrow here. Whichever way I want to make the changes based on this curved arrow, I can make those changes and generate it. In this way, when I changed it, it became big and this line is coming here. Okay. So, here some changes are happening, the way that we are changing here, even here the changes are happening. So, I will make it 10pixles again. Okay. And this was 15pixles initially. No, here it was 10 and here 12. Okay. So, this is my arrow. So, as per need whichever icon or thumbnail or something like that you have to generate, you want to generate shape. You can generate something like that in this file and you can place it. As of now I am removing it so that my program doesn’t look bad. So, this is my arrow. So, as a conclusion, if we wish to add a shape using before and after. If we want to add a shape by making It yourself, we can add that. So, this was our today’s section where we learned about pseudo elements. So, guys during the section, in the segment if you have a question or query. If you have not understood anything, you can tell us on forums.learnvern.com. And I will request that you perform the practical of what we have learned today. And then check if the practical is properly getting performed or not. If you are doing the changes, are they happening properly or not. Even while performing the practical, you are getting any problem. Even that you tell us on forums.learnvern.com. We will try to revert to all you question with solutions. Our next segment is on CSS combinators. Thank you.