Skip to content
Related Articles

Related Articles

CSS content Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 21 Oct, 2021

The content property in CSS is used to generate the content dynamically (during run time) ie., it replaces the element with generated content value. It is used to generate content ::before & ::after pseudo-element.

Syntax:

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

Property Values: All the properties are described well with the example below.

normal: It is used to set the content if the content property is normal, also, it is used to sets the default value.

Syntax: 

Element::before|after { 
    content: normal;
}

Example: This example demonstrates the use of the content property to generate content ::before & ::after pseudo-element.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
    p::before {
        content: "Welcome ";
    }
      
    a::before {
        content: normal;
    }
    </style>
</head>
  
<body>
    <p>to GeeksforGeeks</p>
  
    <p id="a">you</p>
  
</body>
</html>

Output: 

Welcome to GeeksforGeeks
Welcome you

none: It does not set the content before and after the pseudo-element.

Syntax: 

Element::before|after { 
    content: none;
}

Example: This example demonstrates the use of the content property where the content inside the <p> tag, will be displayed dynamically with different values.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
    p::before {
        content: "Hello";
    }
      
    p#a::before {
        content: none;
    }
    </style>
</head>
  
<body>
    <p> GeeksforGeeks!</p>
  
    <p id="a">Welcomes to GeeksforGeeks!</p>
  
</body>
</html>

Output: 

Hello GeeksforGeeks!
Welcome to GeeksforGeeks!

initial: It sets the property to its default value.

Syntax:

Element::before|after {
    content: initial;
}

Example: This example demonstrates the use of the content property where the content is displayed to its initial value.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
    p::before {
        content: "Welcome ";
    }
      
    a::before {
        content: initial;
    }
    </style>
</head>
  
<body>
    <p>to GeeksforGeeks</p>
  
    <p id="a">you</p>
  
</body>
</html>

Output: 

Hello GeeksforGeeks!
Hello Welcomes to GeeksforGeeks!

attribute: It sets the attribute value containing a specified value.

Syntax: 

Element::before|after { 
    content:attr(href); 
}

Example: This example demonstrates the use of the content property where the attribute value is set to the specified values.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
      a::after {
          content: attr(href);
      }
    </style>
</head>
  
<body
  <a href=
        Click Here!
  </a
</body>
</html>

Output:

Click Here! https://www.geeksforgeeks.org/html-style-attribute/

String: It is used to generate any string before and after the HTML element.

Syntax:

Element::before|after { 
    content: string;
}

Example: This example demonstrates the use of the content property where the string value will generate any string before and after the HTML element.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS | content Property</title>
    <style>
      
        /* String value used here */
        p::before { 
            content: "Hello";
        }
    </style>
</head>
  
<body>
    <p> GeeksforGeeks!</p>
  
</body>
</html>

Output: 

Hello GeeksforGeeks!

open-quote: It generates an opening quote before and after an element.

Syntax:

Element::before|after { 
    content: open-quote;
}

Example: This example demonstrates the use of the content property where the property value of content is set to open-quote.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
        p::before {
            content: open-quote;
        }
    </style>
</head>
  
<body
    <p>Welcome to GeeksforGeeks!</p>
</body>
</html>

Output:

"Welcome to GeeksforGeeks!

close-quote: It generates a closing quote before and after an element.

Syntax:

Element::before|after { 
    content: close-quote;
}

Example: This example demonstrates the use of the content property where the property value of content is set to close-quote.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
        p::after {
            content: close-quote;
        }
        p::before {
            content: open-quote;
        }
    </style>
</head>
  
<body>   
    <p>Welcome to GeeksforGeeks!</p>
</body>
</html>

Output:

"Welcome to GeeksforGeeks!"

no-open-quote: It removes the opening quote from the content if it is specified.

Syntax: 

Element::before|after { 
    content: no-open-quote;
}

Example: This example demonstrates the use of the content property where the property value of content is set to no-open-quote.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
        p::before {
            content: open-quote;
        }
        p::before {
            content: no-open-quote;
        }
    </style>
</head>
  
<body>
     <p>Welcome to GeeksforGeeks!</p>
  
</body>
</html>

Output: 

Welcome to GeeksforGeeks!

no-close-quote: It removes closing quotes from the content if it is specified.

Syntax:

Element::before|after { 
    content: no-close-quote;
}

Example: This example demonstrates the use of the content property where the property value of content is set to no-close-quote.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | content Property </title>
    <style>
        p::before {
            content: open-quote;
        }
        p::after {
            content: no-close-quote;
        }
    </style>
</head>
<body>
    <p>Welcome to GeeksforGeeks!</p>
</body>
</html>

Output:

"Welcome to GeeksforGeeks!

inherit: This property is inherited from its parent element.

Syntax: 

Element::before|after { 
    content: inherit;
}

Supported Browsers: The browser supported by the content property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 8.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!