The **`content` property** in #key# CSS: Cascade Style Sheets #key# is used to create the generated content. We will write the content which is not included in the HTML document. 

> If we want to insert the generated content, we have to use the `content` property with the  **`::before and ::after pseudo-elements.`** 

# 
#  Syntax

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

# 
## Property values

- **`normal`**: It is the default value. 

- **`none`**:  It is used to set the content to nothing. 

- **`counter`**: It is used to set the content as a counter. 

- **`attr`**: It is used to set the content as a selector's attribute. 

- **`string`**: It is used to specify the content of the text to be generated. 

- **`open-quote`**: It is used to set the content to be shown as opening quote.

- **`close-quote`**: It is used to set the content to be shown as closing quote.

- **`no-open-quote`**: It is used to remove the opening quote from the content. 

- **`no-close-quote`**: It is used to remove the closing quote from the content. 

- **`url`**: It is used to add something from the external source such as: image.
  
- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits property from its parent value.

##
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the content property:

<title>Example</title>

<h1>Quote of the Day</h1>
<quot>I hear and I forget. I see and I remember. I do and I understand</quot> </br>
<said>Chinese proverb</said>

quot:before 
{ 
  content: open-quote;
}
quot:after 
{ 
  content:close-quote;
}
said:before 
{ 
  content: "Quoted by ";
}

codemirror

In this example, we can see that we have written a quote by using the open-quote and close-quote property. 

What is the CSS content property?

Used with ::before and ::after pseudo-elements to add generated content in CSS.