Pseudo-elements style specific parts of an element.
::Before
The ::before pseudo-element inserts content before an element’s actual content.
CSS
x
p::before { content: "Note: "; font-weight: bold;}::After
The ::after pseudo-element inserts content after an element’s actual content.
CSS
p::after { content: " Read more..."; font-style: italic;}::First-line
The ::first-line pseudo-element applies styles to the first line of text inside an element.
CSS
p::first-line { font-weight: bold; color: blue;}::First-letter
The ::first-letter pseudo-element applies styles to the first letter of the first line of text inside an element.
CSS
p::first-letter { font-size: 200%; color: red;}CSS Pseudo-elements Example Code
HTML/CSS
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Pseudo-elements Example</title> <style> p::before { content: "Note: "; font-weight: bold; } p::after { content: " Read more..."; font-style: italic; } p::first-line { font-weight: bold; color: blue; } p::first-letter { font-size: 200%; color: red; } </style></head><body> <p>This is a paragraph. Notice how the first line is styled differently, and additional content is inserted before and after the paragraph.</p></body></html>
CSS Labs
