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

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

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<details class="open:details-content:bg-[#dff7ec] open:details-content:text-[#17352a] open:details-content:p-5 open:details-content:rounded-xl open:details-content:border-2 open:details-content:border-solid open:details-content:border-[#67d2a1]" open>
  <summary>¿Qué estiliza ::details-content?</summary>
  <p>Apunta al contenido desplegable de un details, sin afectar al summary.</p>
</details>

CSS

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