Pseudo-elements allow styling specific parts of elements, such as the first letter, first line, inserting content before
or after elements without adding additional HTML code. The most commonly used pseudo-elements
are ::before
, ::after
, ::first-letter
, and ::first-line
.
/* Examples */ p::first-line { font-weight: bold; /* Changes the font weight of the first line of text in <p> */ } p::first-letter { font-size: 200%; /* Changes the font size of the first letter in <p> */ } .element::before { content: "Prefix"; /* Adds content before the element */ } .element::after { content: "Suffix"; /* Adds content after the element */ }