CSS3 Selectors: Pseudo-element ::before

This entry is part 38 of 40 in the series CSS3 Selectors

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes.

We use an earlier figcaption example to add a text content to a figure caption.

Note that we are actually inserting content inside the element that we are targeting and in the example below, we are targeting <figcaption>.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
        figcaption::before {
            content:'Figure: ';
            font-weight: bold;
            color: brown;
    <img src='//codecrawl.com/code/images/ushuaia.jpg' width='300px'>
    <figcaption>Ushuaia, the southernmost city in the world</figcaption>




Series Navigation<< CSS3 Selectors: Pseudo-class :empty
CSS3 Selectors: Pseudo-element ::after >>

Leave a comment

Leave a Reply