This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



::before creates a pseudo-element, which allows you to insert content onto a page from CSS before the selected element(s). The end result isn’t actually in the DOM, but it appears on the page as if it is. The pseudo-element is inline by default.


p::before {
  content: 'Hello!';



The ::before and ::after pseudo-elements specify the location of content before and after an element in the document tree. The content attribute, in conjunction with these pseudo-elements, specifies what is inserted. 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. In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::before pseudo-element. For more information, see the Pseudo-elements section of the W3C’s CSS3 Selectors specification.


A simple selector.

Standards information

Related specifications

CSS Level 2 Specification
W3C Recommendation

See also

Related pages