Content

• The content property is used to specify what content should be generated by pseudo-elements (::before and ::after).

• The content property can take different values, including text strings, URLs, or an empty string.

Here are some common use cases:

1. Text Content:

.element::before {
  content: "Before Content";
}

.element::after {
  content: "After Content";
}

In this example, the ::before pseudo-element will generate content that says "Before Content," and the ::after pseudo-element will generate content that says "After Content."

2. Empty Content:

.element::before {
  content: "";
}

.element::after {
  content: "";
}

An empty string is often used when the pseudo-element is used for styling purposes without generating additional content.

3. Counter Values:

ol li::before {
  counter-increment: myCounter;
  content: counter(myCounter) ". ";
}

This example uses the counter function to generate ordered list items with a counter.

4. Image Content:

.element::before {
  content: url('icon.png');
}

You can use the url() function to specify an image as content for a pseudo-element.

5. Attribute Values:

a::after {
  content: attr(data-tooltip);
}

This example uses the attr() function to dynamically generate content based on the value of the data-tooltip attribute of the a element.

The content property is versatile and allows you to generate content in different ways, providing flexibility in styling and layout.