CSS Pseudo-elements
CSS Pseudo-elements — Style specific parts of elements with CSS pseudo-elements: before, after, selection styling, and content generation. The guide walks through What are Pseudo-elements?, ::before and ::after - Content Generation, Text Styling Pseudo-elements, Placeholder, Marker, and Patterns. Pseudo-elements style specific parts of an element. They use double colons (::) to distinguish them from pseudo-classes. ::before /* Insert content before element */ ::after /* Insert content after element */ ::first-line /* Style first line of text */ ::first-letter /* Style first letter of text */ ::selection /* Style selected/highlighted text */ ::placeholder /* Style input placeholder text */… The ::before and ::after pseudo-elements create virtual children. They MUST have a content property. Basic usage: .element::before { content: ""; display: block; } Adding text: .link::after { content: " →"; } Using attributes: .link::after { content: attr(href); font-size: 0.8em; color: #666; } Icons: .button::before { content: "\\2605"; margin-right: 4px; } Counters: .section::before { counter-increment: section; content: "Section " counter(section) ":…