CSS content Property - GeeksforGeeks

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="https://www.geeksforgeeks.org/html-style-attribute/">        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
ManasChhabra2
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?