CSS content

CSS content property includes the text, image or content(quote) as the child of an element or as the content of pseudo elements (:after, :before, :marker) instead of adding within html elements.

Example

<style>
ul li a:before{
 content:"\025B8";
}
</style>

Try </>

Syntax

content: url(image.png);

Value

A value may represent an image url, text, quotation marks for :first-letter, :before, :after pseudo elements.

content= url() | none | content-list

1. url()

url() uses the image as the content of an element or pseudo element.

Example

<style>
ul li a:before{
 content:url(/images/web4college-9x9.png);
}
</style>

Try </>

This value may consist of more than one urls (content images) separated by comma.

Example

<style>
ul li a:before{
 content:url(image1.MFG), url(image1.png);
}
</style>

If the first image is available and the format is not supported by the browser, it will be ignored. And if the next image that has the same name and format is supported by browser will be used.

2. none

none value for pseudo elements means there is no content. And if it is specified for a normal element, the content of element will be the child elements.

Example

<style>
ul li a:before{
 content:none;
}
</style>

Try </>

3. content-list

content-list indicates the quotation marks for elements and pseudo elements.

3.1 quotes

The following values for the content property can add quotation marks before or after the content.

open-quote
close-quote: They add quotation marks before and after the content.

Example

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

Try </>

See in the above example, every paragraph has open and close quotation marks.

Note: If there are more than one paragraphs in blockquote, the opening and closing quotes are appended before and after every paragraph. We can use no-open-quote or no-close-quote to eliminate the quotes.

no-close-quote
no-open-quote: It is same as none but increments or decrements the depth level of quotes (nesting quotes).

Example

<style>
blockquote p:first-child:before{
 content:open-quote;
}
  
blockquote p:last-child:after{
 content:close-quote;
}
</style>

Try </>

In the above example, open-quote specifies the quotes before the first paragraph only and open-quote specifies the quotes after the last paragraph only.

Applicable to

It is applicable to all of the elements including pseudo elements (::before, ::after, ::marker).

Browser support

Browsers
content	✓	✓	✓	✓	✓

The content property has been covered up completely. If you are an advanced learner and want to get more on content property, continue to the remaining part otherwise skip to the next tutorial.

More on css content

Now we'll understand content property more deeply by collaborating it with other elements and properties.

css content after

:after pseudo element allows the content property to add the content after some element.

Example

<style>
ul li a:after{
 content:"\025B8";
}
</style>

Try </>

The above given unicode represents triangle right.

css content before

:before pseudo element allows the content property to add the content before some element.

Example

<style>
label:before{
  content:"\02261";
}
</style>

Try </>

The above unicode icon can be used as the toogle.

css content first letter

:first-letter adds the content as the first letter of a paragraph or for some other element.

Example

<style>
.note p:before{
  content:"\1D538";
}
</style>

Try </>

In the above example, '\1D538' unicode adds first character before the paragraph.

css content code list

There is a huge list of unicodes that may be used to add icons in a web page. For example, toogle icon, asterisk, left arrow, right arrow, verticle dots, horizontal dots etc.

Example

<style>
label:before{
  content:"\02261";
  font-size:40px;
}
</style>

Try </>

Unicode is a hexadecimal value. We use unicode after the backward slash ('\'). See a complete list of unicodes that you may use in the website.

css content text

The value of content attribute may also be customized. We can add text or string as the value of content property.

Example

<style>
.note p:before{
 content:"Note:";
}
</style>

Try </>

css content image size

When we use image as the value of content, we can resize the image.

Example

<style>
div{
  content:url(/images/web4college-96x96.png);
  width:50px;
  height:50px;
} 
</style>

Try </>

If we are using the image as the content of an element, we can apply all the css attributes to image.

If we use the image as the content of pseudo elements (:after, :before), we can't resize the image.

css content font awesome

We can use the awesome fonts for our website. These awesome icons may include web, code, building etc.

Example

<i class="fa fa-code" style="font-size:20px; color:red;"></i>

Try </>

In the above example we are using the code awesome font.

Only pseudo elements can use unicodes, images as the value of content attribute. Only elements use images as the value of content property.