CSS content property

The CSS content property is used with the ::before and ::after pseudo-elements to insert generated content before or after an element’s content. It allows you to add additional text or graphical elements to the document’s flow without modifying the actual HTML content. The content property is commonly used for creating decorative elements, icons, tooltips, or for adding textual content with CSS-generated counters.

The syntax for the content property is as follows:

selector::before {
  content: value;
}

selector::after {
  content: value;
}

• selector: Represents the HTML element or class to which the ::before or ::after pseudo-element will be applied.
• value: Specifies the content to be inserted. It can be a string enclosed in single or double quotes, or it can use special escape sequences to represent various types of content.

Example:

.button::before {
  content: "\f067";
  font-family: "Font Awesome";
  margin-right: 5px;
}

.button::after {
  content: " (Click me)";
  color: #999;
}

In this example, we use the ::before pseudo-element to insert a Font Awesome icon before elements with the class .button. The content property sets the value to "\f067", which is the Unicode character for the Font Awesome “arrow-right” icon. We also specify the font-family to “Font Awesome” to ensure the correct icon is displayed.

Then, with the ::after pseudo-element, we add the text ” (Click me)” after the .button elements, styled with a gray color.

Keep in mind that the content property can only be used with the ::before and ::after pseudo-elements. It does not apply to regular HTML elements, and you cannot use it to modify the actual content of an element that exists in the HTML source.

Using the content property gives you more flexibility in adding visual and textual elements to your web page without relying solely on HTML content. This can be beneficial for decorative purposes or for adding extra information and interactivity to your design. However, always consider accessibility and ensure that any content added with content is meaningful and usable to all users.