Content

In this chapter, we will learn what CSS content property is and how to use it in our websites.

The content property is used with :before and :after pseudo elements to generate content inside an element.

Objects which are inserted with content property are anonymous replaced elements.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           li:before{
                  content:"List item";
            }
	   p:after{
                  content:" with string value.";
            }
       </style>
   </head>
   <body>

     <ul>
         <li>1</li>
	 <li>2</li>
	 <li>3</li>
     </ul>

     <p>Here is some paragraph</p>
       
   </body>
</html>

Property Values

Value Descriptions
normal It sets the content to none for :before and :after pseudo elements. It is the default value of this property.
none It means that the pseudo elements are not generated.
counter It sets the content as counter.
attr It sets the content as one of the selectors' attribute. Attr comes from Attribute.
string It sets the content to text.
open-quote It sets the content to be an opening quote.
close-quote It sets the content to be a 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 sets the content to be a media just like an image, a sound or a video. If the image cannot be displayed, it will be either ignored or some placeholder will be displayed.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.