counter() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* 1. Start the counter at 0 */
.container {
  counter-reset: section-counter;
}

/* 2. Tell CSS which element triggers the count */
h2 {
  counter-increment: section-counter;
  display: flex;
  align-items: center;
  font-family: sans-serif;
}

/* 3. Show the number before the heading text */
h2::before {
  /* This is where the magic happens */
  content: "Section " counter(section-counter) ": ";
  
  /* Styling the number specifically */
  background-color: #007bff;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 0.8rem;
}</style></head><body><div class="container">
  <h2>Introduction</h2>
  <h2>Getting Started</h2>
  <h2>Advanced Techniques</h2>
  <h2>Conclusion</h2>
</div></body></html>