CSS content Property

CSS content Property

This property generates content in a document and is used with the -

:before, and

:after pseudo-elements.

Syntax -

Now we will see the values with their descriptions -

Value	Description
none	This sets the content if specified none.
counter	This sets the content as a counter
attr	This sets the content as selector's attributes
url	This sets the content for media
string	This sets the content to specifiable text
open-quote	This sets the content for opening quote
close-quote	This sets the content for closing quote
no-open-quote	This removes the opening quote from the content
no-close-quote	This removes the closing quote from the content
normal	This sets the content, and this is the default value.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "starts here -";
background-color: rgb(245, 248, 169);
color: rgb(0, 13, 255);
font-weight: bold;
}
p::after {
content: "Ends here -";
background-color: rgb(245, 248, 169);
color: rgb(0, 13, 255);
font-weight: bold;
}
</style>
</head>
<body>

<h1>This is a sample heading</h1>

<p>This is a sample pera Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur animi fugit cumque, sequi omnis architecto. Impedit molestias, inventore itaque asperiores debitis repudiandae sint atque illum, quis adipisci, fuga quos praesentium maiores similique necessitatibus?</p>
<p>This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempora accusantium nulla aperiam quos ratione reprehenderit, minima quod debitis culpa, nihil, ipsum provident quisquam iusto impedit ducimus? Numquam accusamus veniam ad eum dolorum.</p>
</body>
</html>

Output -