Playground de ::details-content en CSS

Explora el pseudoelemento CSS ::details-content con un details nativo, personaliza el contenido desplegable y copia el HTML y CSS generado.

¿Qué estiliza ::details-content?

Apunta al contenido desplegable de un details, sin afectar al summary.

HTML

<div class="details-demo">
  <details open>
    <summary>¿Qué estiliza ::details-content?</summary>
    <p>Apunta al contenido desplegable de un details, sin afectar al summary.</p>
  </details>
</div>

CSS

.details-demo details[open]::details-content {
  background-color: #dff7ec;
  color: #17352a;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #67d2a1;
}