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

Example

Basic

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

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:

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

Heading Numbering

heading numbering with a section

  • The CSS
section { counter-increment: section; }
h2 { counter-increment: h2; }
h1::before { content: "Chapter " counter(section) ": \A"; }
h2::before { content: "Section " counter(section) "." counter(h2,lower-alpha) ": \A"; }
  • The HTML
<section>
<h1>Heading 1</h1>
<h2>Heading 1.1</h1>
<h2>Heading 1.2</h1>
</section>
<section>
<h1>Heading 2</h1>
<h2>Heading 2.1</h1>
<h2>Heading 2.2</h1>
</section>
  • Result:

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) " ";
}

Documentation / Reference


Powered by ComboStrap