Pseudo Elements in CSS

 Pseudo Elements

Pseudo is a Greek Word. Its meaning is "Fake"

Pseudo-elements in CSS allow you to add styles to specific parts of an HTML element.

Pseudo-element is a keyword added to a CSS Selector. It allows to style of specific parts of an HTML element.

Generally, CSS applies styles to the whole HTML element. So, to add different styles to specific parts you need to add more HTML elements.

Let’s understand the importance of pseudo-elements with the following example.

Example:

Task: Change the styles of the first line of a paragraph to font color red and font-variant small-caps as follows.

HTML body:

<p>Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

Scenario 1: Using general CSS properties.

Notice that we have to change both styles and the HTML body to achieve this. In the HTML body, we added a new <div> tag.

Changes to Styles:

p {

       color: #ff0000;

       font-variant: small-caps;

       margin: 0;

}

Changes to the HTML body:

<div><p>Some more text. And even more, and more, and more, and more, and more, and more,</p> and more, and more, and more, and more, and more, and more.</div>

Scenario 2: Using Pseudo-Elements in CSS.

Notice that we only have to change styles. No need to add more HTML elements.

Changes to Styles:

p::first-line {

       color: #ff0000;

       font-variant: small-caps;

}

Written by:  W.A. Eranga Dewmini