CSS Pseudo Elements

Pseudo-elements in CSS are used to apply special effects or insert content before or after specific parts of an element without using JavaScript or other scripts.

As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.

Here are some commonly used pseudo-elements:

::first-line pseudo-element

This pseudo-element adds special effects to the first line of the text. It supports the following CSS property:-

• Color properties (such as color,background-color)
• Font properties (such as font-style, font-family, font-size, font-color, and many more).
• Background properties (such as background-color, background-repeat, background-image, and background-position).
• Other properties are word-spacing, letter-spacing, line-height, vertical-align, text-transform, text-decoration.

Input:-

Output:-

::first-letter pseudo-element

This pseudo-element target only the first letter of the element and is applied to only block-level element

• Color properties (such as color)
• Font properties (such as font-style, font-family, font-size, font-color, and many more).
• Margin properties (such as margin-top, margin-right, margin-bottom, and margin-left).
• Border properties (like border-top, border-right, border-bottom, border-left, border-color, border-width, and many more).
• Padding properties (such as padding-top, padding-right, padding-bottom, and padding-left).
• Background properties (such as background-color, background-repeat, background-image, and background-position).
• Text related properties (such as text-shadow, text-transform, text-decoration, etc.).
• Other properties are vertical-align (only when the float is 'none') word-spacing, line-height, line-spacing

Input:-

Output:-

::before pseudo-element

The ::before pseudo-element allows us to add content before the element's content. It is used to insert content before a specific part of an element. Typically, it is used in conjunction with the content property, where the value represents the content we want to insert before the element.

Input:-

Output:-

::after pseudo-element

The ::after pseudo-element functions similarly to the ::before pseudo-element, but it inserts content after the element's content. It is used to add something after a specific part of an element.

It follows the same concept of using the content property to define and insert the desired content after the element.

Input:-

Output:-

We can also use this after and before pseudo-element to make pointed arrows. The below example illustrate it with the help of border and position property.

Input:-

Output:-