CSS - content Property

Quiz

CSS content property is used primarily in combination with the ::before and ::after pseudo-elements to generate dynamic content within an element. It allows the insertion of text, images, or other content before or after an element's content, without altering the HTML structure, it only affects the rendering.

Syntax

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

Property Values

Value	Description
none	It sets the content to nothing.
normal	It sets the content to normal.
counter	It sets the content as a counter.
attr(attribute)	It sets the content as the selector's attribute.
string	It sets the content as the text specified.
open-quote	It sets the content as an open quote.
close-quote	It sets the content as a close quote.
no-open-quote	It removes the open quote from the content.
no-close-quote	It removes the close quote from the content.
url	It sets the content as media (e.g. image, video or sound etc.)
initial	It sets the property to the default value.
inherit	It inherits the property from the parent element.

Examples of CSS Content Property

The following examples explain the content property with different values.

Content Property with None Value

To prevent any extra content meant for insertion through the pseudo elements (::before or ::after) into the main content, we use the none value. The none value prevents the insertion and display of additional content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Hello!";
      }

      p#name::before {
         content: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <p> 
      John
   </p>
   <p id="name">
      Ashok Kumar
   </p>

</body>

</html>

Content Property with Normal Value

The normal value when used with pseudo-elements (::before or ::after) computes to none. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Good Morning!";
      }

      p#name::before {
         content: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <p> 
      Sir
   </p>
   <p id="name">
      Madam
   </p>

</body>

</html>

Content Property with Counter Value

To display increasing values useful in numbering, we can use the counter, the counter maintains a count and displays the same with the content. Depending on the usage of the pseudo-elements (::before or ::after), the count will be displayed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         counter-increment: count;
      }

      p::before {
         content: counter(count);
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: counter
   </h4>
   <p> 
      One
   </p>
   <p> 
      Two
   </p>
   <p> 
      Three
   </p>
   <p> 
      Four
   </p>
   <p> 
      Five
   </p>
   <p> 
      Six
   </p>
</body>

</html>

Content Property with Attribute Value

To display the value of a specified attribute from the HTML element, we use the attr(attribute). The specified attribute value will be taken from the HTML element and added to the content as per the usage of the pseudo-elements(::before or ::after). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li::after {
         content: "(" attr(information)")";
      }

      a::before {
         content: attr(href);
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>content: attr(attribute)</h4>
   <ul>
      <li information="This defines the structure of the webpage">
         HTML 
      </li>
      <li information="This styles the webpage">
         CSS 
      </li>
      <li information="This adds functionality to the webpage">
         JAVASCRIPT 
      </li>
   </ul>
   <p>
         You can learn the above here:
         <a href="https://www.tutorialspoint.com" target=blank> 
         (TutorialsPoint)
         </a>
   </p>

</body>

</html>

Content Property with Strings

To insert strings into the main content, we can specify the string in the content property. Depending on the usage of the pseudo-elements(::before or ::after), the strings will be inserted and displayed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Welcome to";
      }

      p::after {
         content: "Thank you.";
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: string
   </h4>
   <p> 
      Tutorialspoint! Start learning the technology 
      of your choice with our resources- easy to 
      understand, interactive and interesting. 
   </p>
</body>

</html>

Content Property with Open Quote

To insert an open quote into the main content, we use the open-quote value. Depending on the usage of the pseudo-elements(::before or ::after), the quote will be inserted. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

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

      p::after {
         content: close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: open-quote
   </h4>
   <p>
      Actions speak louder than words
   </p>
   <p>
      Better late than never
   </p>
</body>

</html>

Content Property with Close Quote

To insert an close quote into the main content, we use the close-quote value. Depending on the usage of the pseudo-elements(::before or ::after), the quote will be inserted however it is to note that the close quote will work only if open quote is used first. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

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

      p::after {
         content: close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: close-quote
   </h4>
   <p>
      The early worm catches the worm
   </p>
   <p>
      Slow and steady wins the race
   </p>
</body>

</html>

Content Property without Open Quote

To remove any specified open quote that is inserted into the content, we use the no-open-quote value. Depending on the usage of the pseudo-elements(::before or ::after), the open quote will be be removed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

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

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

      p.no-open::before {
         content: no-open-quote;
      }

   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: no-open-quote
   </h4>
   <p>
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
   <p class="no-open">
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
</body>

</html>

Content Property without Close Quote

To remove any specified close quote that is inserted into the content, we use the no-close-quote value. Depending on the usage of the pseudo-elements(::before or ::after), the close quote will be be removed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

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

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

      p.no-open::after {
         content: no-close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: no-close-quote
   </h4>
   <p>
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
   <p class="no-open">
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
</body>

</html>

Content Property with URLs

To display some multimedia such as an image, video or audio with the content, we can specify the url of the file. Depending on the usage of pseudo-elements(::before or ::after), the multimedia will be placed. In the following example an image has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p#first::before {
         content: url("/https/www.tutorialspoint.com/css/images/tutimg.png");
      }

      p#second::after {
         content: url("/https/www.tutorialspoint.com/css/images/tutimg.png");
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: url()
   </h4>
   <p id="first"> 
      TutorialsPoint
   </p>
   <p id="second">
      TutorialsPoint 
   </p>
</body>

</html>

Supported Browsers

Property
content	1.0	8.0	1.0	1.0	4.0

css_reference.htm

Print Page