pseudo-element
::after Pseudo-Element
Creates a generated child element as the last child of the matched element, styled with CSS and requiring a content property. It is often used for badges, clearfix, or decorative endings.
::afterExample
a[href$=".pdf"]::after { content: " (PDF)"; } /* Adds label after PDF links */✓ Matches
- <a href="x.pdf">Doc</a> gets " (PDF)" appended
- <button>Save</button> can have generated content after it
- <div class="clearfix"></div> can add a clearing element
✗ Does not match
- <img> since it is a replaced element
- <br> as a void element with no content model
Browser support
Universal support in all browsers; double-colon syntax since CSS3.