Add an Underline to a details Element when It's Open in CSS

December 2025

I like having a little line show up to underline the summary of a details element when it's open. This is how I'm doing it.

<details class="example-details">
  <summary>This is the summary</summary>
  <p>This is some content</p>
  <p>And, some more content</p>
</details>

This is the summary

This is some content

And, some more content

.example-details:open > summary {
  border-bottom: var(--accent-border);
}

I want to play around with this more at some point to shift the border so that it's only under the text. This works fine in the mean time.

-a

end of line