Blog Post

Pseudo Elements

Pseudo elements are like elements but aren’t quite. The most common pseudo elements are ::before and ::after which allow you to insert content into an element. ::before is put into the element right after the opening tag and ::after is put in right before the closing tag. (Note: elements without closing tags e.g. img, input, br, hr, etc cannot have ::before and ::after because there’s no place to put them). Other pseudo elements are ::first-letter, ::first-line, and ::selection which select the first letter of content in an element, the first line of content in an element and the content you’ve highlighted with your keyboard and/or mouse, respectively.