How to add content to an Element using CSS

You can use the CSS content property to add text contents to an element in your web page. However, this property can only be used with pseudo elements like ::before and ::after.

For example, I have a list of stationary goods on my web page, against which I want to add a star or the asterix character (not the comic character), but the symbol *) if the goods are not in my inventory.

<!DOCTYPE>
<html>
<head>
    <title>CSS content Property Example</title>

    <style>
        .outOfStock::after {
            color: red;
            content: " *";
        }
    </style>
</head>
<body>
    <p>Using CSS "content" property to add a "*" character after an item!</p>
    
    <ul>
        <li>highlighters</li>
        <li>pencils</li>
        <li>erasers</li>
        <li class="outOfStock">scrapbooks</li>
        <li class="outOfStock">paper clips</li>
    </ul>
</body>
</html>

Try it

In the above example, the character * (or asterix) shows against two items, which has the class outOfStock defined. The * symbol shows after each item name, since I have used the CSS content property using the pseudo element ::after. See the <style> section in the markup.

Note: You can use other characters like \2193. It shows a down arrow.

Browser Support:

Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 8 and above - Yes | Safari - Yes | Opera 4+ - Yes

Using CSS “content” Property with “::before” Pseudo Element

Similarly, you can use the pseudo element ::before with the content property. For example,

<!DOCTYPE>
<html>
<head>
    <title>CSS content Property Example</title>

    <style>
        .inStock::before {
            color: red;
            content:  "\2713  ";
        }
    </style>
</head>
<body>
    <p>CSS "content" property with pseudo element ::before!</p>
    
    <ul>
        <li class="inStock">highlighters</li>
        <li class="inStock">pencils</li>
        <li class="inStock">erasers</li>
        <li>scrapbooks</li>
        <li>paper clips</li>
    </ul>
</body>
</html>

Try it

Note: You can apply both ::before and ::after with CSS content property. For example,

<!DOCTYPE>
<html>
<head>
    <title>CSS content Property Example</title>
</head>
<body>
    <style>
        ul {
            display: table;
            margin: 0;
            padding: 0;
        }
        ul li { 
            list-style: none;
        }
        
        .inStock::before {
            color: red;
            content:  "* ";
        }
      
        .inStock::after {
            color: red;
            content:  " *";
        }
    </style>

    <p>CSS "content" with pseudo elements ::before and ::after.</p>
    
     <ul>
    	<li class="inStock">highlighters</li>
    	<li class="inStock">pencils</li>
    	<li class="inStock">erasers</li>
    	<li>scrapbooks</li>
    	<li>paper clips</li>
     </ul>
</body>
</html>

Try it

See the space I have added before and after the * with the content property.

Using CSS content Property Dynamically

You cannot add the pseudo elements ::before and ::after using JavaScript. However, you can add a class name, with the pseudo elements, which also have the CSS content property, dynamically using JavaScript. This will do the trick. Here’s an example,

<!DOCTYPE>
<html>
<head>
    <title>CSS content Property Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <style>
        ul {
            display: table;
            margin: 0;
            padding: 0;
        }
        ul li { 
            list-style: none;
        }
        
        .outOfStock::after {
            color: red;
            content:  " \2193";
        }
    </style>

    <p>Click the button to add content to the below list.</p>
    
    <ul class="stationary">
        <li>highlighters</li>
        <li>pencils</li>
        <li>erasers</li>
        <li id="sb">scrapbooks</li>
        <li id="clip">paper clips</li>
    </ul>
    <p>
        <input type="button" id="bt" value="Click it!" />
    </p>
</body>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            $('.stationary').find('#sb, #clip').addClass('outOfStock');
        });
    });
</script>
</html>

Try it

Well, that’s it. You can add texts, symbols, numbers, Unicode (or decimal code), images, hyperlinks etc., to an element using the CSS content property.

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 8 and above - Yes | Safari - Yes | Opera 4+ - Yes

← PreviousNext →