How to add content to an Element using CSS

← PrevNext →

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

Thank for reading :-).

← PreviousNext →