Pseudo-Element Selector

A pseudo-element selector is used to style a specific part of an HTML element.

What is a Pseudo-Element Selector?

Pseudo-elements allow CSS to style a specific part of an element without adding an extra HTML element.

Pseudo-elements are commonly written using double colons ::.

Pseudo-Element Selector Flow

HTML Element
<p>

↓

Pseudo-Element
::first-letter

↓

Style Specific Part

Basic Syntax

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

The double colon :: is commonly used before the pseudo-element name.

Example 1: First Letter

The ::first-letter pseudo-element styles the first letter of a paragraph.

p::first-letter {
    color: red;
    font-size: 32px;
}

Output

Learn CIIT Inatitute step by step with practical examples.

Example 2: First Line

The ::first-line pseudo-element styles the first line of text.

p::first-line {
    color: blue;
}

Output

Learn CSS with simple examples and practical exercises for beginners.

Example 3: Before

The ::before pseudo-element can add content before an element.

p::before {
    content: "Note: ";
    color: red;
}

Output

Note: CSS makes web pages visually attractive.

Common Pseudo-Elements

Pseudo-Element	Purpose
`::before`	Adds content before an element.
`::after`	Adds content after an element.
`::first-letter`	Styles the first letter of text.
`::first-line`	Styles the first line of text.

Important Points

Pseudo-elements commonly use the :: syntax.
They style specific parts of an HTML element.
Common examples include ::before, ::after, ::first-letter, and ::first-line.
Pseudo-elements can add visual effects without changing the HTML structure.

Summary

Pseudo-element selectors allow CSS to style specific parts of HTML elements. They commonly use double colons and are useful for effects such as adding content and styling the first letter or first line.