Pseudo-elements in CSS are used to style specific parts of an element without needing to add additional classes or IDs in the HTML. They allow you to apply styles to a portion of an element's content or to create effects that are not directly part of the document structure.
Common pseudo-elements include:
::before- Inserts content before the content of an element.::after- Inserts content after the content of an element.::first-line- Styles the first line of a block-level element.::first-letter- Styles the first letter of a block-level element.
Example:
p::first-line {
font-weight: bold;
color: blue;
}
p::before {
content: "Note: ";
font-style: italic;
}
In this example, the first line of each paragraph will be bold and blue, and "Note: " will be added before the paragraph content.
