::before / ::after

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML

While the end result is not actually in the DOM, it appears on the page as if it is

The only reasons to use one over the other are:

• You want the generated content to come before the element content, positionally.
• The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support.

:: is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon

Date

March 22, 2024

Up next

Box Model Prev Source Next Source original source A really important thing to remember when writing CSS, or working on the web as a whole, is that everything

Previously

Beautiful Code Prev Source Next Source In many situations, solving the right problem is a big step toward creating a beautiful program. Stephen Kleene invented