What you need to know about the "content" property in CSS

If you use the ::before and ::after pseudo-elements in CSS, then you've already used the content property, without which your element wouldn't be displayed, but do you know what's possible to do with it?

First of all, the role of the "content" property is to insert content generated by CSS into your HTML element.

Or rather into your pseudo-element, since the use of this property is limited to ::before and ::after according to the current specification.

So you probably know that you can simply insert empty content with content: "", text with content: "hello world" or special characters, icons (with a suitable font), etc...

But did you know that you can also:

Insert the value of an attribute

/* <span class="example" data="6">notifications</span> */

span.example::before {
  content: attr(data);
}

Pseudo-elements are often used for illustrative purposes, but as soon as dynamic information needs to be injected, the go-to move is often to create a specific HTML element to display it.

However, here it is possible to inject the data into an attribute of your element, and fetch it with the attr() value of the content property!

Insert an image

div.example::before {
  content: url(...);
}

As with the previous value, it's not mandatory to use an additional element to display an image, it's possible to do it with content.

However you should only use this method for illustrative images, since it's impossible to add alternative text for accessibility.

Insert a counter

p.list-item {
  counter-increment: p_counter;
}
p.list-item::before {
  content: counter(p_counter);
}

Thanks to a variable system that you increment when the selected element is inserted into the page, you can display the counter's value directly in a pseudo-element.

Insert quotation marks

p.example::before {
  content: open-quote;
}

p.example::after {
  content: close-quote;
}

No surprises here, you can automatically add quotation marks at the beginning and end of some of your paragraphs very easily.

There are other values for the content property, but I'll let you discover them directly in the W3School documentation.