The **`content` property** in CSS is used to modify text inside an HTML tag. This property is combined with the `::after` and `::before` pseudo-elements that are used to *append* or *prepend* a value. This property can be set to the following common values:

# 1. Normal

This value applies the default value of this property, which is `none`:

p::before {  
    content: "This is prepended "; 
}
p#x::before{
    content: normal;
}

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
 Line 1
 Line 2
</body> 
</html>

codemirror

# 2. Open-quote/close-quote

This value is used to add quotation marks before or after a text:

p::before {  
    content: open-quote; 
}
p::after{
    content: close-quote;
}

<!DOCTYPE html> 
<html> 
<head>
</head> 

<body> 
 Hello World!
</body> 
</html>

# 3. Value of attribute

The content can be set to the value of an attribute using the syntax `attr(attribute-name)`:

p::before {  
    content: attr(title) ": "; 
}

<!DOCTYPE html> 
<html> 
<head>
</head> 

<body> 
 Hello World!
</body> 
</html>

What is the content property in CSS?

1. Normal

2. Open-quote/close-quote

3. Value of attribute