The content property is used with CSS pseudo-elements to insert text or other content into the document. When you use this property along with ::before or ::after, you can add extra content without changing your HTML. This helps you add decorative elements, icons, or labels with only CSS.

Syntax

selector::before {
  content: "Text here"; /* Inserts text before the element */
}

selector::after {
  content: "Text here"; /* Inserts text after the element */
}

Explanation:

• The content property specifies what to add.
• It is commonly used with pseudo-elements (::before and ::after).

Example 1: Label Before a Paragraph

In this example, we insert the word "Note:" before a paragraph. This shows how to use the content property to add text without modifying the HTML.

Explanation:

• Pseudo-element (::before):
  • The label "Note: " is added before the paragraph content.
• Result:
  • The paragraph appears with a bold red label at the beginning, drawing the user's attention.

Example 2: Adding a Decorative Icon After a Heading

In this example, we add a decorative star icon after a heading using a Unicode character. This demonstrates another use of the content property to enrich the design.

Explanation:

• Pseudo-element (::after):
  • The star (Unicode \2605) is added after the heading "Featured Article".
• Result:
  • The heading is enhanced with a decorative icon that makes it stand out.

These examples show how the content property works with pseudo-elements to add extra text or symbols to your page. This technique lets you enrich your design without changing the HTML, keeping your structure clean and your style flexible.