Shift the Body of a details Element without Moving the summary with CSS

December 2025

I'm working on the docs for bitty¹. The <details> element is getting a lot of use. My default style keeps the content directly under the summary. This is how I'm shifting it over without also moving text from the <summary> element.

HTML

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

Output

Some Details

This is the content

And some more content

CSS

.example-details > :where(:not(:first-child)) {
  padding-left: 1.4rem;
}

I'm still getting used to all the : features of CSS. They've been around for a while. I've haven't done a lot of CSS. The more I use them, the more I'm impressed by what you can do with them.

-a

end of line

Footnotes

1 ⤴

bitty - a little tool for interesting pages

The little web component that could. Where, "could" is reducing the friction to making interesting things happen on web pages.