One thing that can only be funny funky <details> The element is that when it is open, it is not always completely clear what is inside that element and what is not. I’m not saying that always things or that it is particularly difficult to resolve, I have only noticed it since it came to me recently.

Here is a visual example:

What text here is a <details> and what is not?

The solution is… CSS. Style <details> somewhat uniquely, and this problem disappears. Even if you want the typography to be the same, or you don’t want any luxurious style until then <details> is open, it is still possible. The alpha-transparent filler allows you to even ensure that deeper nested <details> remain clear.

Here’s the CSS:

details[open] {
  --bg: rgb(0 0 0 / 0.2);
  background: var(--bg);
  outline: 1rem solid var(--bg);
  margin: 0 0 2rem 0;

And introduction:


Please enter your comment!
Please enter your name here