Back to CSS Accordions Code Comment Pure CSS
Share
HTML
<details class="acc-cc" name="acc-cc">
  <summary>const installCommand = "npm i";</summary>
  <p>Installs the package and resolves all peer dependencies. Adds an entry to package.json.</p>
</details>
<details class="acc-cc" name="acc-cc" open>
  <summary>const importStatement = "import x from 'lib';";</summary>
  <p>ES module import. Tree-shakable so unused exports won't bloat the bundle.</p>
</details>
<details class="acc-cc" name="acc-cc">
  <summary>const renderHook = "useEffect";</summary>
  <p>Side-effects after paint. Cleanup runs on unmount or before the next effect fires.</p>
</details>
CSS
.acc-cc {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  background: #0e0e16; border-left: 3px solid #8fb3a3;
  margin-bottom: 4px; padding: 4px 0;
}
.acc-cc summary {
  cursor: pointer; list-style: none;
  padding: 8px 14px; font-size: 12.5px;
  color: rgba(143,179,163,0.85); position: relative;
}
.acc-cc summary::-webkit-details-marker { display: none; }
.acc-cc summary::before {
  content: '// '; color: rgba(143,179,163,0.45);
}
.acc-cc[open] summary { color: #f0eeff; background: rgba(143,179,163,0.06); }
.acc-cc[open] summary::before { content: '/* '; color: #d49a5c; }
.acc-cc[open] summary::after { content: ' */'; color: #d49a5c; }
.acc-cc p {
  margin: 0; padding: 8px 14px 12px 28px;
  font: 11.5px/1.7 ui-monospace, monospace;
  color: rgba(240,238,255,0.6);
}
.acc-cc p::before {
  content: '→ '; color: #d49a5c;
}