::before (:before)

:before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.

Syntax

element:before  { style properties }  /* CSS2 syntax */
element::before { style properties }  /* CSS3 syntax */

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Tutorials</title>
        <style>
            q::before {
                content: ">>";
            }

            q::after {
                content: '<<';
            }
        </style>
    </head>
    <body>
        <q>
            Some quotes
        </q>, he said,
        <q>
            are better than none
        </q>.
    </body>
</html>