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 - Overflow

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box. The overflow property...
CSS - list-item (list formatting)

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 Heading Sequentiel Order
HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

Heading define the structure / outline / table of content of the document (page) They are defined via: the heading element (h1/h6) via the aria heading role section of the document letter, the...
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



Share this page:
Follow us:
Task Runner