Export (0) Print
Expand All
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.
This topic has not yet been rated - Rate this topic

::before pseudo-element

Defines generated content that functions as a virtual first-child of the matched element.

CSS 2.1, Section 5.12.3


sel::before {...}



A simple selector.

Standards information


The ::before and ::after pseudo-elements create virtual first and last children within an element in the document tree. The content attribute, in conjunction with these pseudo-elements, specifies what is inserted. Other specified styling properties apply to the appearance of the inserted content, not to the element's content.

The generated content interacts with other boxes as if they were real elements inserted just inside their associated element. The content box of the associated element expands to include the generated content, if necessary.


The following style rules insert curly braces before and after each occurrence of h1 in the document tree. The curly braces will be displayed in brown on a light blue background; the element itself will remain unchanged.

h1::before {
  content: "{ ";
  color: brown;
  background: lightblue;
h1::after {
  content: " }";
  color: brown;
  background: lightblue;

In the image below, you can see the curly braces before and after the h1.

An h1 element with curly braces surrounding it

   <h1>Lorem ipsum dolor sit amet</h1>

See also




Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
© 2014 Microsoft. All rights reserved.