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.
<!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