CSS Pseudo Elements -

CSS Pseudo Elements

Pseudo Elements are special keywords that allow us to style specific parts of an element. Unlike regular elements, pseudo-elements don’t represent actual HTML elements but provide a way to select and style certain parts of an element’s content or structure. They are denoted by a double colon (::) followed by the name of the pseudo-element.
Syntax:

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

In the below PDF we discuss about CSS Pseudo Elements in detail in simple language, Hope this will help in better understanding.

Common Pseudo Elements:

1: ::before and ::after:

These pseudo-elements allow you to insert content before or after the content of an element.
Example:

.example::before {
content: "Before ";
}

2: ::first-line and ::first-letter:

::first-line targets the first line of a block-level element.
::first-letter targets the first letter of the first line.
Example:

p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 150%;
}

3: ::selection:

Styles the portion of text that is selected by the user.
Example:

::selection {
background-color: #ffcc00;
color: #000;
}

4: ::nth-child and ::nth-of-type:

These pseudo-elements allow you to select elements based on their position in a parent element.
Example:

li:nth-child(even) {
background-color: #f2f2f2;
}

5: ::not:

Negates a selector, allowing you to select everything except the specified element.
Example:

p:not(.special) {
color: #333;
}

Conclusion:

CSS pseudo-elements are a valuable asset in a web developer’s toolkit, offering enhanced control and creativity in styling. Whether it’s adding decorative elements, inserting content dynamically, or fine-tuning the structure, pseudo-elements empower developers to craft visually stunning and engaging web pages. By mastering the art of pseudo-elements, we can unlock a new level of design possibilities and bring our web projects to life.