::before and ::after Content

Pseudo-elements create virtual elements that are styled as if they were part of the DOM. They use double colons ::. The most used are ::before and ::after.

::before inserts generated content before an element's content. ::after inserts it after. Both require the content property to render.

The content property accepts:

• A string: content: "text"
• Empty string: content: "" (common for decorative shapes)
• URL: content: url("icon.svg")
• Counter: content: counter(step)
• attr(): content: attr(data-tooltip)

Add typographic quotation marks without adding them to HTML:

Setting content: "" with position and dimensions creates decorative shapes without extra HTML:

The classic clearfix uses ::after to clear floats without extra markup:

CSS-only tooltip using ::after and attr():

Insert a small icon before links using content: url():

Pseudo-elements are not in the DOM. They are:

• Not selectable or searchable by users
• Not accessible to screen readers by default
• Not targetable by JavaScript

Never put essential content in generated content — use them only for decorative purposes.

Single colon (:before) was the CSS2 syntax. Double colon (::before) is the CSS3 standard that distinguishes pseudo-elements from pseudo-classes. Both work in modern browsers, but use double colon for new code.

Replaced elements (img, input, select, video) cannot have pseudo-elements because they have no content area to insert into. Use a wrapper element for decoration instead.

::before and ::after insert generated content around an element's real content. The content property is required. Use them for decorative shapes, icons, quotes, and tooltips — but never for meaningful content that users need to access or read.