pseudo-element
::before Pseudo-Element
Creates a generated child element as the first child of the matched element, styled with CSS and requiring a content property. It is commonly used for decorative icons or quotation marks.
::beforeExample
blockquote::before { content: "\201C"; } /* Curly opening quote */✓ Matches
- <blockquote>Hi</blockquote> gets content inserted at its start
- <h2>Title</h2> can have generated content before it
- <li>Item</li> can have generated content before it
✗ Does not match
- <img> since replaced elements do not generate ::before
- <input> since it is a replaced element
Browser support
Universal support in all browsers; double-colon syntax since CSS3.