CSS Selector ::before

The ::before selector inserts content before the content of the selected elements.

:before is a Pseudo-element and it generates a pseudo-element containing generated content placed before the content in the element.

:before can insert generated content at the beginning of an element's content.

By default, the pseudo-element generated is inline, but this can be changed using the property display.

Examples:

a[href]:before  {content: "[LINK]";) 
p:before {content: attr(class);}

Summary

CSS Version: 2

CSS Syntax

CSS3 syntax(double-colon)

::before { 
   style properties 
}

CSS3 syntax(single-colon)

:before { 
   style properties 
}

Browser compatibility


`::before`	Yes	9.0	Yes	Yes	Yes

Internet Explorer 8.0 supports the single-colon syntax.

Example

An example showing how to use :before CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
p:before{<!--from w  w  w  .  ja va  2s.co m-->
   content:"added before";
}
</style>
</head>

<body>
   <p>this is a paragraph.</p>

</body>
</html>

Click to view the demo

Example 2

The following code uses the :before and :after Selectors.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a:before {<!--from   w  w w.j  ava 2s .co  m-->
  content: "Click here to "
}

a:after {
  content: "!"
}
</style>
</head>
<body>
  <a href="http://java2s.com">Visit the website</a>
  <p>
    I like <span>CSS</span> and HTML.
  </p>
  <a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo