Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator

What is the CSS content property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The content property in CSSCascade Style Sheets is used to create the generated content. We will write the content which is not included in the HTML document.

If we want to insert the generated content, we have to use the content property with the ::before and ::after pseudo-elements.

Syntax


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

Property values

  • normal: It is the default value.

  • none: It is used to set the content to nothing.

  • counter: It is used to set the content as a counter.

  • attr: It is used to set the content as a selector’s attribute.

  • string: It is used to specify the content of the text to be generated.

  • open-quote: It is used to set the content to be shown as opening quote.

  • close-quote: It is used to set the content to be shown as 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 is used to add something from the external source such as: image.

  • initial: This sets the value to its default value.

  • inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the content property:

In this example, we can see that we have written a quote by using the open-quote and close-quote property.

RELATED TAGS

css
community creator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring