Pseudo Elements in CSS
? Pseudo-elements in CSS
Pseudo-elements let you style specific parts of an element or insert content without adding extra HTML.
They use double colons :: followed by the pseudo-element name (single colon : also works but double colon is recommended).
Common Pseudo-elements
| Pseudo-element | Description | Example |
|---|---|---|
::before | Inserts content before the element’s actual content | Adds decorative icons, quotes |
::after | Inserts content after the element’s content | Clearfix, decorative effects |
::first-letter | Styles the first letter of text | Drop caps in paragraphs |
::first-line | Styles the first line of text | Highlight first line |
::selection | Styles the part of text selected by the user | Change highlight color |
Basic Example
/* Add a quote before each blockquote */blockquote::before { content: "“"; font-size: 2em; color: gray;}/* Clear floats after a container */.container::after { content: ""; display: table; clear: both;}/* Style first letter like a drop cap */p::first-letter { font-size: 2em; font-weight: bold; float: left; margin-right: 5px;}Important Notes
contentproperty must be used with::beforeand::after.Pseudo-elements are not part of the DOM, so you can’t target them with JavaScript directly.
Great for adding decorative elements without extra markup.
Want me to show you creative examples using pseudo-elements for buttons or fancy text effects?
