Detailed Explanation of the CSS Content Property

Description
The content property is a special property in CSS used with pseudo-elements (::before and ::after) to generate and insert content. It is the core of CSS's Generated Content functionality, allowing us to add decorative,辅助, or dynamic content to a page via CSS without directly modifying the HTML structure.

Core Features

• Can only be used with the ::before and ::after pseudo-elements
• Default value is none (generates no content)
• Inserted content is not in the DOM but participates in rendering

Detailed Explanation of content Property Values

1. String Values
The most basic usage is to insert a text string.

.element::before {
  content: "Note: ";
  color: red;
}

• Strings must be enclosed in quotes (single or double)
• Can include Unicode characters and escape sequences

2. Attribute Value References
Inserts the value of an element's HTML attribute as content.

a::after {
  content: " (" attr(href) ")";
}
.abbr::after {
  content: " (" attr(title) ")";
}

• The attr() function can reference any HTML attribute
• Commonly used to display link URLs, abbreviation expansions, etc.

3. URL Values
Inserts external resources, such as images.

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

• Inserted images cannot be resized; use with caution
• For icons, using background images is often recommended

4. Counters
Used in conjunction with CSS counters to implement automatic numbering.

ol {
  counter-reset: section; /* Initialize counter */
}
li::before {
  counter-increment: section; /* Increment counter */
  content: counter(section) ". "; /* Display counter value */
}

5. Special Keywords

• open-quote / close-quote: Insert quotation marks
• no-open-quote / no-close-quote: Do not insert quotes but affect quote nesting level

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

Practical Application Scenarios

Scenario 1: Decorative Content

.decorative::before {
  content: "❖";
  margin-right: 0.5em;
  color: #ff6b6b;
}

Scenario 2: Clear Floats (Classic Application)

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Scenario 3: Tooltips

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  /* Other positioning and styling */
}

Important Considerations

1. Accessibility

   • Screen reader support for content-generated content is inconsistent
   • Important content should be written directly in the HTML

2. SEO Impact

   • Search engines may not index content-generated content
   • Do not use for critical content

3. Copy and Paste

   • Users cannot select and copy content-generated content

4. Using with Other Properties

.element::before {
  content: "→";
  display: inline-block;
  margin-right: 5px;
  font-weight: bold;
}

Advanced Techniques

Combining Multiple Content Items

.complex::before {
  content: "Prefix " attr(data-value) " Suffix";
}

Empty Content for Layout

.spacer::before {
  content: "";
  display: inline-block;
  width: 20px;
}

Although the content property is powerful, it should be used judiciously. It is best suited for decorative or辅助 content. Avoid using it for critical functional content to ensure page accessibility and SEO-friendliness.