CSS content Property

CSS content property is used with ::before and ::after pseudo-elements to insert some extra content into an element.

The content to be inserted can be string(s) of text, images, glyphs, quotes, counters for lists, etc. Try out the example below to see how it works:


  content: ' * ';
  content: ' ** ';
  content: url(images/thumb.png);

CSS Syntax

The content property has the below syntax:

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

Property Values

The content property accepts the following values:

normalThis is the default value. It evaluates to none. Which means no content is set.
noneNo content is set.
counterSets the content as a counter. It is generally used with lists.
attr(attribute_name)Sets the value of the specified attribute as content. It is generally used with <a> elements.
stringSets the specified string as content.
open-quoteSets the opening quote as content.
close-quoteSets the closing quote as content.
no-open-quoteRemoves the existing opening quote if any.
no-close-quoteRemoves the existing closing quote if any.
url(source)Sets the media(image, video, glyph, etc) specified by the source as content.
initialSets the content property to its default value(normal).
inheritInherits the content property from the parent element.

General Info

Default Valuenormal
JavaScript UsageN/A


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment