String

The content: “string”; CSS property value inserts the specified string literal into the content of the ::before and ::after pseudo-elements.

Syntax:

Element::before|after { 
    content: string;
}

Example: This example demonstrates the use of the content property where the string value will generate any string before and after the HTML element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS content Property</title>
    <style>
        /* String value used here */
        p::before {
            content: "Hello";
        }
    </style>
</head>

<body>
    <p> w3wiki!</p>

</body>

</html>

Output:

Hello w3wiki!

CSS content Property

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. It allows insertion of text, images, or HTML elements, enhancing design without altering the original HTML structure, thereby providing flexibility in styling and layout.

Syntax:

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

Property Values: All the properties are described well with the example below.

Table of Content

normal
none
initial
attribute
String
open-quote
close-quote
no-open-quote:
no-close-quote
inherit

String

CSS content Property

Similar Reads

Contact Us