I observed that the <details> element is rendered differently in Chrome and Firefox. Take a look at the code sample below.
According to the HTML Standard:
The first summary element child of the details element represents the summary or legend of the details. If there is no child summary element, the user agent should provide its own legend (e.g. "Details").
The content of the details element after the summary represents additional information or controls.
The open attribute is a boolean attribute. When present, it indicates that both the summary and additional content are shown. If absent, only the summary is displayed.
As per CSS specifications outlined in the CSS Standard:
Pseudo elements like ::before and ::after generate boxes that appear as immediate children of their originating element, with content specified by the pseudo-element's 'content' property.
The ::before pseudo-element comes before the actual content of the element, while the ::after pseudo-element follows the actual content.
In Chrome and Chromium-based browsers, ::before and ::after are displayed respectively before and after the <summary>, regardless of the presence of the open attribute on the <details> element. It seems that <summary> is considered part of the details content, even if not explicitly defined but generated by the browser.
On Firefox, ::before and ::after appear after the <summary> and around the additional information when the open attribute is present. When the open attribute is absent, only the summary is shown. This behavior suggests that <summary> might not be included in the details content. This aligns with the behavior seen in <fieldset>, where ::before appears after <legend>. However, one would expect these pseudo-elements to always remain visible since the <details> element is still visible when closed.
What do you think should be the correct behavior?
details::before {
content: "before";
color: red;
}
details::after {
content: "after";
color: green;
}<details>
<summary>Closed details</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</details>
<details open>
<summary>Open details</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</details>