CSS Reference

":before" - css pseudo-element (v. css 2)

  • Will add content before an element . The 'content' property, in conjunction with this pseudo-elements, specifies what is inserted.
  • HTML usage: all elements
  • Browsers that support the :before - pseudo-element :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
    Browser deviation:
    • To work in IE, a DOCTYPE must be declared.

Pseudo-element ":before" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      p.note:before {
        content: "Note:";
        font-weight: bold;
      }
      p#first:after {
        content: " (you cannot use tags in content property)";
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="first"> This is the first paragraph.
    <p class="note"> :after and :before
      plays with CSS content property.
  </body>
</html>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.