CSS Pseudo Elements – A complete Guide with Examples

effect using ::before and ::after pseudo elements
Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello friends, today I am going to cover all Cascading Style Sheets (CSS) Pseudo-elements. What are they? What is its purpose? Myths related to CSS Pseudo-Elements and much more.

Side Note: One of my readers points out that auto-translation in technical documents are not very accurate in the post HTML List. It is advised that you should try reading an article in English if it is not making sense in your regional language. Then you can do a manual translation of the term or word using Google Translate if needed.

What are CSS Pseudo Elements?

Cascading Style Sheets or CSS Pseudo-elements are special keywords that are added to CSS selectors to add content or apply special effects to selected elements. Let us first try to understand what CSS selector.

A CSS selector in Cascading Style Sheets (CSS) are patterns to select the elements in your HTML document. It can be by element name, element id, element attribute, element attribute value, or CSS class name. For example, P CSS selector will select all paragraph elements (<p> </p>). You can add a styling code or animation effect code in the CSS selector. For example, p { background-color:skyblue; } , will select all the paragraph elements and apply a skyblue background color to them.

Side Note: I will be covering CSS Selectors in detail in my future posts. So stay connected.

Now, what if I want to style the first letter or the first line of the paragraph element? That is where CSS Pseudo Elements come and play an important role. They eliminate the need for custom and complex JavaScript code or unnecessary DOM elements and CSS to achieve the required styling or effects.

Each CSS Pseudo-element is associated with an HTML element. They are always followed by a CSS selector with ::<Pseduo-Element>.

General Browsers Support

  • Google Chrome: All versions
  • Firefox: 3.5 or higher
  • Safari: 4 or higher
  • Opera: 7 or higher
  • Internet Explorer: 9 or higher

They can be divided into three major categories, which are:

  • Typographic Pseudo-elements
  • Highlight Pseudo-elements
  • Tree-Abiding Pseudo-elements

Typographic Pseudo-elements

Typographic Pseudo-elements are related to the text content in the HTML document. There are two types of Typographic Pseudo-elements.

  • ::first-line
  • ::first-letter

::first-line pseudo-element

The ::first-line pseudo-element can be applied only to block-level elements, such as headings and paragraphs. It is very important to understand what the first-line actually means.

In the context of browsers and pseudo-element, the first line is the content appearing on the first line of the block element. It may or may not contain a complete sentence. For example, if the width of the paragraph is too short to hold not more than four words then the first four words can only appear in the first line of the paragraph. This will leave the rest of the sentence unformatted, as it is appearing on the next line. Let us understand this with the help of graphics.

::first-line Pseudo-element
::first-line Pseudo-element

As you can clearly see in the graphic that first-line is not relating to one complete sentence. It may be a part of a sentence or multiple sentences depending upon the content that appears on the first line of the element. You can click the graphic to see the code and try it yourself.

Now that we understand what first-line means, let us look at how we can use the ::first-line pseudo-element. To use it just append after any block-level CSS-selector. For example:

p::first-line
{
/*Sytling Code Here*/
}

Let us now look at what can we do with the ::first-line pseudo-element. You can use all:

  • Font properties,
  • Typesetting properties,
  • Text-decoration properties, and
  • Background, color, and opacity properties

Please find a detailed example here.

::first-letter pseudo-element

The ::first-letter pseudo-element is commonly used to create a drop-cap or initial-cap typographic effect. For example, refer to the below screenshot.

::first-letter-pseudo-element
::first-letter-pseudo-element
p::first-letter
{
/*Sytling Code Here*/
}

Let us now look at what can we do with the ::first-letter pseudo-element. You can use all:

  • Font properties,
  • Typesetting properties,
  • Text-decoration properties,
  • Background, color, and opacity properties,
  • Inline layout properties,
  • Margin and Padding properties, and
  • Border and shadow properties

Please find a detailed example here.

Highlight Pseudo-elements

The highlight pseudo-elements are used to style selected and not selected content of the HTML document. This is useful to give visual hint to the user about the selected items in different colors. Which nicely blends to your current theme and remains readable.

As per w3.org there are four highlight pseudo-elements, which are:

  • ::selection
  • ::inactive-selection
  • ::spelling-error
  • ::grammar-error

However, in this article, I will be covering the ::selection highlight pseudo-element.

::selection pseudo-element

It is used to modify how the selected content should appear on the screen. You can change the background color or text color using this pseudo-element. Please look at the example here.

Tree-Abiding Pseudo-elements

The tree-abiding pseudo-elements are those which append into the existing HTML document. They can be styled like any other document element. They can hold content as well and if their content property is blank then they generate empty boxes.

Important Note: They cannot be applied to elements that cannot have children or content. For example, an image element <img> or line break <br>. They are inline by default and are contained within the elements formatting box.

There are mainly two tree-abiding pseudo-elements. They are:

  • ::before
  • ::after

::before pseudo-element

The ::before creates the first child element of the selected element. It is a myth that it creates an element before the selected element which is not true. let us look at this with the help of an example.

::before pseudo element
::before pseudo-element

As you can see that we have a simple paragraph with a green border. The width of the paragraph element is set to 250px. Further, we used the ::before pseudo-element to append >> in red color. As said earlier that the ::before creates the first child element within the formatting box of the selected element. Also if we look at the Developer tools, it is clearly the first child of the selected element, as shown in the following figure.

::before pseudo element
::before pseudo-element

Side Note: However, you can visually position it anywhere in the selected element. You can also create interesting effects, which I will be covering in my future posts. So, stay tuned.

Please find the example here.

::after pseudo-element

It creates the last child element for the selected element within the formatting box. It is also inline by default and visually appears at the end of the element. Which is not technically true.

Let’s look at the example below.

::after pseudo element
::after pseudo-element

Using both ::before and ::after pseudo-elements

Let us try to create the below effect using the ::before and ::after pseudo-elements.

effect using ::before and ::after pseudo elements
effect using ::before and ::after pseudo-elements

Please find the detailed code example here.

Side Note: However, you can visually position it anywhere in the selected element. You can also create interesting effects, which I will be covering in my future posts. So, stay tuned.

References


Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *