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:

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

Documentation / Reference





Discover More
Browser Chrome Dom Elements Panel
Browser - DOM

This page is the DOM functionality in the browser. A browser has more object model (OM) To see the DOM in a browser, you use the devtools. The DOM is represented in the Elements panel. Example...
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Attr function (attribute)

The attr function select the value of an attribute where:
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
CSS - list-item (list formatting with marker box)

This page is the formatting of element seen as a list-item. A list-item has: a principal block box (the normal box) and anadditional box known as themarker box (the marker). All properties applies...
Content Venn
HTML - (Content of an element|Content Model)

The contents of an element are its children in the DOM tree. Each element has a content model: a description of the element's expected contents. HTML Authors must not use HTML elements anywhere except...
Html Checkbox Illustration
How to create and use a HTML checkbox ?

This article gives you all the important information about HTML checkbox and how to use them
How to do HTML heading / outline numbering with CSS

Adding a number before a heading is a css feature made available through: the counter feature of the content property heading numbering of a section The CSS The HTML Result:
How to use CSS Counter ?

css supports counter variable that can be used in a property value (for instance in a content property to add numbering to: heading or list For instance: We create two counters: one for...



Share this page:
Follow us:
Task Runner