Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > before Pseudo-class

---

Represents a child pseudo-element immediately before the originating element’s actual content.

selector::before { content: value;
   property: value; }

property	Any valid CSS property.
value	Any of the range of values available to the corresponding property.

The ::before pseudo-class generates a pseudo-element that is the first child of the selected element.

It is often used to add custom content to an element via the content property, such as icons, tooltips, or other cosmetic decoration.

The syntax for using the ::before pseudo-class is straightforward. A selector immediately precedes the pseudo-class.

For example, to add content before the selected element:

.warning::before { content: url( "/shared/images/exclaim.gif" ) }

The following demonstrates use of the ::before pseudo-class in an embedded stylesheet to add content before an element.

• 5.12.3. The :before and :after pseudo-elements
• 4.1. Generated Content Pseudo-elements: ::before and ::after

::after