CSS content property

Description

CSS content property content inside an element or pseudo elements (::after, ::before, ::marker). The content might be a string or url of an image.

Syntax

content : normal | none | url(image-address) | string | open-quote | close-quote

Property values

normalDefault

It computes to contents for an element. And it computes to inhibit for a pseudo element.

content: normal;

none

It does not add any content.

content: none;

string

It adds a string in pseudo elements (::before or ::after).

In the following demo, we add a string in the pseudo (::before) element.

content: "Note: ";

url(image-address)

It can add an image either as the content of pseudo elements or normal element.

In the following demo, we add an image in the ::before pseudo element.

content: url("img/web4college.png");

open-quote

In the following demo, we add an open-quote in the ::before pseudo element.

content: open-quote;

close-quote

In the following demo, we add a close-quote in the ::after pseudo element and open-quote in the ::before pseudo element.

content: close-quote;

Applicable to

It applies to ::before, ::after and ::markers only. But image and url values can apply to all elements..

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 

We are learning content property for normal and pseudo elements.

▾
×

Ctrl+D