Make details and summary Elements that Look Like a Button

December 2025

I'm working on a bitty script to automatically add "Alt Text" buttons under my images. I'm using <details> elements for the native behavior. The child <summary> elements are blocks by default. I'm making them inline-block so the look more like buttons.

Here's the CSS I ended up with that expands the summary back out when the parent <details> element is open.

Output

Click Me

This is the contents of the details element

HTML

<details>
  <summary>Click Me</summary>
  <p>This is the contents of the details element</p>
</details>

CSS

details :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
  padding-inline: 0.4rem;
}

details {
  & summary {
    cursor: pointer;
    padding-inline: 0.6rem;
  }
}

details[open]{
  border-radius: 0.4rem;
  outline: 1px solid red;
  padding-bottom: 0.4rem;

  & summary {
    display: block;
    border-bottom: 1px solid red;
  }

  & summary:before {
    content: "▼ ";
    font-family: monospace;
  }
}

details:not([open]) {
  & summary {
    border-radius: 0.4rem;
    display: inline-block;
    outline: 1px solid red;
  }

  & summary:before {
    content: "▶ ";
    font-family: monospace;
  }
}

I've played around with a few iterations where the <summary> is styled in different ways when the <details> is open. I'm quite happy with the way this one looks.

-a

end of line

Endnotes

I had to put the disclosure arrows in with :before pseudo-elements when I switched the summary to inline-block. I wouldn't have thought that to be necessary. Not a big deal.

I'm using [open] instead of :open because the later is marked as not fully working in safari yet.