Pseudo-elements in CSS allow us to style certain parts of an element without adding extra markup to the HTML.
Pseudo-elements are denoted by double colons "::" and are used to style specific parts of an element's content.
Inserts content before or after the content of an element.
.classname::before {
content: "Before";
color: black;
}
.classname::after {
content: "After";
color: white;
}
element::before {
content: "Before";
color: black;
}
element::after {
content: "After";
color: white;
}h2::first-line {
font-weight: bold;
}
p::first-line {
font-weight: bold;
}
Selects the first line of text within an element.
span::first-letter {
font-size: 30px;
}
::selection {
background-color: black;
color: white;
}
Selects the first letter of text within an element.
Applies styles to the portion of an element that is selected by the user.
Pseudo-elements are often used to add decorative elements, such as icons or quotation marks, to elements.
They can also be used to create special effects or apply styles to specific parts of an element's content.
Pseudo-elements are not part of the actual DOM structure and therefore cannot be selected or modified using JavaScript. They exist purely for styling purposes.
Pseudo-elements are powerful tools in CSS for creating visually appealing and interactive web designs. They provide a way to style elements dynamically without the need for additional markup in the HTML document.