Make Details be Inline

Help
,
1

I’m trying to use Details on words in a paragraph. Clicking the words will pop open the details as if they were a footnote, directly within the text. But I am being Foiled by Details refusing to behave as an inline element.

Using details will generate a paragraph-closed tag for the preceding line of text, and put the summary word on its own new line as if it were a block. The only way to prevent this is by no longer using paragraphs, which seems like a totally egregious decision.

I have some other ideas (using an anchor or button plus some javascript ) but I’m annoyed because details is RIGHT THERE

2

does this fix the issue you’re describing?

 p:has(+ details) { display: inline; }
 details { display: inline;  }
 summary { cursor: pointer; display: inline; }
2 Likes
3

oh yes, wow, thank you - it absolutely does. That’s wonderful

4

Wow, I didn’t know you could do this, :has is pretty powerful!

Moved this to Help so that this answer can be marked as a solution.

5

Manatee isn’t familiar with :has. Is it a CSS thing?

6

yes, this is all CSS! pseudo-classes is what they’re called.