When I was learning web development I used to write simple HTML and CSS. But after some time I came across some inbuilt CSS tricks which will make our life easy without writing javascript logic just to get some styling. In this blog, I will cover CSS Pseudo-elements with some examples.

Introduction

Pseudo-elements are used to add style or extra content to specific HTML elements without using extra HTML elements so that our HTML code will be clean and CSS will take care of adding extra content.

syntax

selector::pseudo-element {
  property: value;
}

There are different types of pseudo-elements present but we will discuss only below pseudo-elements.

1. ::before.
2. ::after.
3. ::first-letter.
4. ::first-line.
5. ::selection.
6. ::marker.

::before / ::after

Both the ::before and ::after pseudo-elements will create a child element before and after the content of selected HTML respectively. we have to specify content property when we use these pseudo-elements, it could be a string or empty content. Now let's look into the actual code.

As you can see we have not added any extra elements to our HTML file but still we can see some extra content in grey boxes that are coming from CSS. If you inspect our paragraph element you will see our browser considers our pseudo-elements as children of the paragraph element.

Also, we can add extra styling to our pseudo-elements for example I have displayed ::before element as block and ::after as inline which is the default.

Note you can't use pseudo-elements more than once to the same HTML elements.

::first-letter

The ::first-letter pseudo-element will apply the style to the first letter of first line of block element.

Note: If you are using ::before pseudo-element with ::first-letter then the first-letter style will be applied on first letter of ::before pseudo-element injected content.

we can use the below styles for ::first-letter pseudo-element

• All font properties.
• All background properties.
• All margin properties.
• All padding properties.
• All border properties.
• color properties.
• The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text- decoration-style, box-shadow, float, vertical-align (only if float is none) CSS properties

::first-line

The ::first-line pseudo-element will apply the style to the first line of block element.

Note: first-line pseudo-element styles will depend on length of the content, width of the block element, font-size, width of the document

we can use the below styles for ::first-line pseudo-element

• All font properties.
• All background properties.
• color properties.
• word-spacing, letter-spacing, text-decoration, text-transform, line-height text-shadow, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

::selection

The ::selection pseudo-element will apply the style to the highlighted content on the page.

we can use the below styles for ::selction pseudo-element

• background-color.
• color properties.
• text-decoration, text-shadow.

::marker

The ::marker pseudo-element will apply the style to the marker box of a list item which could be an unordered or ordered list.

we can use the below styles for ::marker pseudo-element

• All font properties.
• color properties.
• white-space property.
• text-combine-upright, unicode-bidi and direction properties.
• animation and transition properties.

conclusion

Pseudo-elements are really helpul in writng a clean HTML. Remember CSS is also a part of web development so it is important to learn some basics of CSS. you will encounter lot of developers using ::before/::after elements more for complex designs which is why it is important to learn these pseudo-elements.