How to Update CSS Content Property Dynamically

The content property in CSS is used to generate the content dynamically. The content property is used with the ::before and ::after pseudo-elements, to insert generated content. In this tutorial, We will show you How to Update CSS content property dynamically.

Also Read: How to validate a URL in PHP

CSS Syntax:

    //CSS Syntax 
    content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

1 2	//CSS Syntax content: normal\|none\|counter\|attr\|string\|open-quote\|close-quote\|no-open-quote\|no-close-quote\|url\|initial\|inherit;

Example:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <title>TechArise</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
    .content-magic {
        position: relative;
        margin-bottom: 174px;
        margin-top: 100px;
        font-size: 17px;
    }
    .content-magic:after {
        content: attr(data-content);
        font-family: 'Sherina-Safira';
        text-transform: lowercase;
        color: #3A721D;
        font-size: 15px;
    }
    </style>
        <body>
            <h2 class="content-magic" data-content="magic.">This is </h2>
        </body>
    </html>

<!DOCTYPE html>

<title>TechArise</title>

<style>

.content-magic {

position: relative;

margin-bottom: 174px;

margin-top: 100px;

font-size: 17px;

}

.content-magic:after {

content: attr(data-content);

font-family: 'Sherina-Safira';

text-transform: lowercase;

color: #3A721D;

font-size: 15px;

}

</style>

<body>

</body>

</html>

Also Read :How to Open URL in Same Window and Tab using JavaScript