A simple guide to CSS pseudo-Elements

let me ask you a question, suppose you have a paragraph on your website and want to make the first letter drop-case, How would you do it? or What if you want to change the colour of the highlighted text in the paragraph? Well, you will probably add some more HTML for the element and then you will style them with CSS. Well, CSS pseudo-element has got you covered. So hello my friends, I am Abhishek Yadav and I will talk about pseudo-elements - What are pseudo-elements? Why should you use them? and What are the benefits of using them and many more things about it?

Here is the table of contents if you want to read a specific part of this blog.

What is pseudo-elements ?

Why should we use pseudo-elements?

Difference between the pseudo-elements and pseudo-class.

Different types of pseudo-elements.

1. ::before

2. ::after

3. ::first-letter

4. ::first-line

5. ::file-selector-button

6. ::selection

7. ::placeholder

5. Experimental pseudo-elements.

1. ::spelling-error

2. ::grammar-error

3. ::target-text

What are pseudo-elements -- CSS pseudo-elements are keywords that you can add to your CSS selectors to style the specific part of selected elements of your HTML document. It gives you more options to style the selected elements without adding any more HTML code.

One important thing about the pseudo-elements syntax is that CSS 1 and CSS 2 uses ‘single-colon’ notation to represent the syntax of both pseudo-element and pseudo-class like this,

but CSS 3 uses ‘double-colon’ notation to specify the syntax of pseudo-elements like this, 

and in CSS 3 they (developers) made an attempt to distinguish between pseudo-element and pseudo-class. Nevertheless, In CSS 3 if you continue to use ‘single-colon’ notation then it will work because the browsers still support it so that they don’t break older Websites, but technically in CSS 3 it is wrong to specify the pseudo-elements with ‘single-colon’ notation rather you should specify the pseudo-elements with ‘double-colon’ notation.

2. Why should we use pseudo-elements -- So Now I’m assuming you all got acquainted with pseudo-elements, let’s move on to why should we use them. So let’s take an example that supposes, you are working on a project and you have this paragraph 

Now, what if you want to ‘capitalize’ the first letter of the above paragraph or just want to change the colour of it, want to incorporate an icon, emoji, or more lines in a paragraph, or want to change the background colour of the paragraph when the user highlights any letter or the whole paragraph, well to achieve all of this without adding any HTML tag with CSS class just to design the specific part, We can use pseudo-elements which can help us to style specific part of the element.

3. Difference between pseudo-element and pseudo-class — Now if you’re convinced why should you use pseudo-element and understood why ‘W3C’ changed the syntax of pseudo-elements from the single colon to double colon. let’s see the difference between pseudo-element and pseudo-class. Pseudo-element is the keyword which added to the selector to style the specific part of the selected element like changing the font size or colour of the first line of the paragraph whereas the pseudo-class is used to style the elements based on element state like changing the colour of button element when user ‘hover’ on it or just change the font size. So you see if you use a pseudo-element like ‘::first-line’ to change the colour of the first line of the paragraph then it changes suddenly, but if you use a pseudo-class like ‘:hover’ to change the colour then it will wait to change the colour until you hover over it.

1. ::before - ‘::before’ pseudo-element used to add some content before the selected element. ‘::before’ pseudo element uses the ‘content’ property to add content before the selected element. ‘::before’ pseudo-element has the display property ‘inline’ by default and the initial value of ‘content’ is none. This pseudo-element is really useful when you want to change the style or want to add some content before the selected element.

Let’s see this code snippet to understand the syntax and use case of ‘::before’ pseudo-element,

Here, below in the output section we’ve used ‘::before’ pseudo element in both examples to add some content before the selected element. Above In the code snippet in the first example, we’ve added a line of text before the paragraph using ‘::before’ pseudo-element and hence it is demonstrated in red colour in the below output. likewise, In the second example we’ve added the hashtag before the items using ‘::before’ pseudo-element.

2. ::after --  ‘::after’ pseudo-element has the same properties as ‘::before’ pseudo-element but as the name suggests ‘after’ adds the content after the selected HTML element. ‘::after’ pseudo element also uses the ‘content’ property for its functioning and it has the display property ‘inline’ by default same as ‘::before’ pseudo-element.

Here is the code snippet to demonstrate the ‘::after’ pseudo-element,

In the below output, you can see that we’re again taking our previous example to demonstrate the ‘::after’ pseudo-element. In the first example the ‘::after’ pseudo element added the line of text after the paragraph while in the second example the ‘::after’ pseudo element added the hashtag after items.

3. ::first-letter -- The ‘::first-letter’ pseudo-element is used to style the first letter of any paragraph or article or just a simple word content on your page. Suppose you have a paragraph on your page and you want to make the letter drop-case or change font size or maybe want to change the colour of the first letter of your paragraph then you can use the ‘::first-letter’ pseudo element to do this stuff. In order to have a better understanding of first-letter pseudo-element there are some below-explained behaviour of this element that you should know,

If you’re adding Punctuation just after the first letter then ‘::first-letter’ pseudo-element will also include Punctuation with the first letter of the paragraph into its match and apply all the style’s that you’ve applied.

If you have a paragraph and you are styling the first letter but in case you added some content before or after the paragraph using ‘::before’ or ‘::after’ pseudo-element, then in that case ‘::first-letter’ pseudo-element will style the first letter of the content generated by ‘::before’ or ‘::after’ pseudo-element instead of original your paragraph.

See the below example, where I demonstrated the ‘::first-letter’ pseudo-element,

Take a look at the output, in the first example, you can see that the first letter of a paragraph now has a font size of 25px and are in red colour while in the second example we have 3 items and the first letter of all these items also changed because we used the ‘::first-letter’ pseudo element to change it.

4. ::first-line --  ‘::first-line’ pseudo-element is used to style the first line of your paragraph or article. The ‘::first-line’ pseudo-element only applies the styles if you have display property on selected element ‘inline’, ‘inline-block’ or ‘block’. This pseudo-element decides the length of the first line of content on the basis of the width of the selected element, the font size of the content and the width of the document. if it’s confusing you then don’t worry, see the below example to understand it better,

In the output, you can see that the ‘::first-line’ pseudo element applied all the styles on the first line of the paragraph.

Now let’s see in this example what happen if you set the width of the element.

you see in the output below that length of the first line is changed because we determined the width of our element. There are some more factors which ‘::first-line’ pseudo element uses to decide the length of the first line, you can play around with it if you want to learn more about this.

5. ::file-selector-button —  ‘file-selector-button’ pseudo element will let you style the ‘upload button’ represented by HTML ‘input element with type = file’. You probably come across ‘file upload’ functionality the ‘::file-selector-button’ represent that ‘file upload button’ and let’s you customize it according to your need.

See this below example,

You can see that the ‘::file-selector-button’ has applied the styles on file upload button.

6. ::selection -- Suppose you are on your website and you highlighted a line of text and you see that a default blue colour is appearing in the background of the highlighted text, now what if you want to change the colour or background colour or want to underline the selected text when use highlight the text, then you can use ‘::selection’ pseudo-element it will let you customize the text that has been highlighted by the user.

Here, the below example demonstrates the ::selection pseudo-element,

Here, see in the output our highlighted text has a red colour and green background instead of the default background blue colour.

7. ::placeholder  —  ‘::placeholder’ pseudo-element represents the placeholder text in the input element box or Textarea element box. It lets you customize the placeholder text like changing the colour 

See the below example,

See in the output, we have default input text without any additional style but in the next input box we are applying the style to placeholder text using ‘::placeholder’ pseudo element.

5. Experimental pseudo element — There are some more pseudo-elements that are in the experimental phase. 

1. ::spelling-error — The spelling error pseudo element used to represent the text which are marked as grammatically wrong by the user agent.

2. ::grammer-error — ::grammer-error pseudo-element represents the group of text segments that is flagged as grammatically wrong by the user agent.

3. ::target-text — The '::target' pseudo element let you customize the text that is scroll target if the browser supports scroll-to-text fragments.

That’s it for this blog if you like this then share it with other people and if you have any feedback, related to writing style, technical content or any other feedback then you can reach me out on my Twitter handle '@__abhishek12'. I will see you in the next blog.