{"id":1278,"date":"2022-05-23T19:08:55","date_gmt":"2022-05-23T19:08:55","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=1278"},"modified":"2023-03-27T12:18:09","modified_gmt":"2023-03-27T12:18:09","slug":"pseudo-elements-in-css","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/pseudo-elements-in-css\/","title":{"rendered":"Pseudo Elements in CSS"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Pseudo Elements CSS<\/strong><\/p>\n\n\n\n<p>The pseudo-elements are used for styling a specific part of an element. It is like if we want to style only the first letter for some element, or the first line of some element, or insert some content before or after content, or even if we only want to style the selection from the user, we can make use of the pseudo-elements.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pseudo Elements CSS | Lecture 11 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/tTAmyCcMeaE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Remember that when we want to style for some particular state of some element, we wrote the selector name, and then we used the single colon, and then wrote the pseudo-class. But when we are styling for some particular part of the element, we are going to write the selector name first, then a double colon, and then the pseudo-element.<\/p>\n\n\n\n<p>Below given are some of the pseudo-elements &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>::first-letter \u2013 as the name says, this element is used to specify the first letter of some element, so that we can style it as per our requirement.<\/li>\n\n\n\n<li>::first-line \u2013 This element is going to specify the first line of some element, so as tho be able to style it<\/li>\n\n\n\n<li>::before \u2013 this element is used when we want to add some content before the element<\/li>\n\n\n\n<li>::after \u2013 this element is used when we want to add some content after the element<\/li>\n\n\n\n<li>::selection \u2013 we use it when we want to do something with the selection of the text. It is like we are styling the text, which is selected by the user.<\/li>\n<\/ul>\n\n\n\n<p>Remember that when we were having a look at pseudo-classes, we used one colon, something like this \u2013 selector:classname. But this time, for using the pseudo-elements, we are going to make use of double colons, which means that we are going to do something like this \u2013 selector::elementname.<\/p>\n\n\n\n<p>So, now it is easy to identify what are we really using. Is it a pseudo-class or an element that we are making use of. Let&#8217;s have a small example, so as to understand the things-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"841\" height=\"338\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements.jpg\" alt=\"\" class=\"wp-image-1279\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements.jpg 841w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-300x121.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-768x309.jpg 768w\" sizes=\"auto, (max-width: 841px) 100vw, 841px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see here, we have a paragraph, and 2 div blocks over here. We are going to do different things with the specific parts of the elements. Let&#8217;s have a look at what is in our CSS file &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"305\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-1.jpg\" alt=\"\" class=\"wp-image-1280\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-1.jpg 411w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-1-300x223.jpg 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/figure>\n<\/div>\n\n\n<p>So, for the specific parts of the elements, we have done different things, like when we select some text from the div element, the background color is brown(instead of the standard blue color), and the color of the text is white. We have also used the before and after things, to add some texts like Hello, which is added just before the content of div, and Bye, which will be added just after the content of div. Also, we have done different things with the first line and first letter of some elements. Let&#8217;s have a look at the output now &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"347\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-2.jpg\" alt=\"\" class=\"wp-image-1281\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-2.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-2-300x102.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Pseudo-elements-2-768x261.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see in the output, the things that we wanted to do, are done now. You can use the pseudo-elements whenever we require them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pseudo Elements CSS The pseudo-elements are used for styling a specific part of an element. It is like if we want to style only the first letter for some element, or the first line of some element, or insert some content before or after content, or even if we only want to style the selection [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13,177],"class_list":{"0":"post-1278","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial","9":"tag-pseudo-elements-in-css"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=1278"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1278\/revisions"}],"predecessor-version":[{"id":5606,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1278\/revisions\/5606"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=1278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=1278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=1278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}