/

HTML / CSS / JavaScript Tutorial

CSS Pseudo-Property: content

[this page | pdf | back links]

The CSS (CSS2) content (pseudo-)property is used with the :before and :after pseudo-elements to insert generated content.

 

For example, a selector taking the following form will add the relevant web address to the link

 

a:after { content: " (i.e. " attr(href) ")"; }

 

Property values (other than inherit and initial) that can be included in the pseudo-property include:

 

Value

Description

string

Some specified text

attr(attribute)

A specified attribute

close-quote

A closing quote

counter(id)

A counter with id defined by id (see counter-increment and counter-reset pseud-properties)

no-close-quote

Removes closing quote of content, if present

no-open-quote

Removes opening quote of content, if present

none

Nothing

normal

(Default). Sets content, if specified to normal, i.e. none

open-quote

An opening quote

url(URL)

URL specifying a media (image, sound, video etc.) to be included in the pseudo-property

 

Default Value:

normal

JavaScript syntax:

N/A. You can’t give an element a pseudo-class (but you can manipulate the document in ways that achieve a similar effect)

Inherited:

No

Animatable:

No

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile