CSS - Content (Property)

About

The content CSS property is used with:

  • the ::before and ::after pseudo-elements
  • to generate content respectively:
  • before or after the content of an element.

Visually, the content is located at the center of the box

Boxdim

Example

Basic

p::before{
   content: "Before ... ";
   border:1px solid aqua;
   color: blue;
}
p::after{
   content: "... after";
   border:1px solid aqua;
   color: darkgreen;
}

with a border to see the pseudo-element 

<p>This text will have <mark>Before...</mark> at its beginning and <mark>...After</mark> at the end</p>
  • The result:
Rendered by WebCode

We can see with the aqua border that an element (a pseudo-element) is added.

Heading Numbering

See How to do HTML heading / outline numbering with CSS

With the attr function

With the attr function, you can show data attribute in the content. 

<p data-length="2m" >Beyond The Sea</p>

p::before {
   content: attr(data-length) " ";
}
Rendered by WebCode

Documentation / Reference