CSS - Content (Property)

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

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:

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, you can show data attribute in the content.

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

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

• content property
• content
• CSS Generated Content Module Level 3