::before 和::after 伪元素的正确行为是什么<details> ? </details>

Question

赏金将在 3 天后到期。 此问题的答案有资格获得+50声望赏金。 Baptistou希望引起对这个问题的更多关注。

我发现<details>在 Chrome 和 Firefox 之间呈现不同。 请参阅下面的代码示例。

根据HTML 标准：

元素的第一个摘要元素子元素（如果有）表示详细信息的摘要或图例。 如果没有子摘要元素，用户代理应该提供自己的图例（例如“详细信息”）。

元素内容的 rest 表示附加信息或控件。

开放内容属性是 boolean 属性。 如果存在，则表示要向用户显示摘要和附加信息。 如果该属性不存在，则仅显示摘要。

并根据CSS 标准：

当它们的计算内容值不是无时，这些伪元素生成框，就好像它们是它们的原始元素的直接子元素一样，内容由内容指定。

::before 表示紧接在原始元素的实际内容之前的可样式化子伪元素。 ::after 表示紧跟在原始元素的实际内容之后的可样式化子伪元素。

在基于 Chrome 和 Chromium 的浏览器上， ::before和::after分别显示在<summary>之前和附加信息之后，无论是否存在open属性。 据我了解， <summary>是详细信息实际内容的一部分，即使标签没有定义而是由浏览器生成？？？

在 Firefox 上，如果存在open属性，则::before和::after显示在<summary>之后以及附加信息周围，否则仅显示摘要。 根据 CSS 定义，这表明<summary>不是详细信息实际内容的一部分。 此行为与<fieldset>一致，其中::before也显示在<legend>之后。 但是，我希望这两个伪元素始终可见，因为<details>在关闭时仍然可见。

那么正确的行为应该是什么？

 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>

Answer 1

从您给出的报价来看，Chromium 似乎违反了 HTML 要求（详细信息关闭时不应显示），并且 Firefox 违反了 Z2C56C360580420D293172F42D 要求之前应在摘要：85DFB 之前：

但是，我们也有来自 HTML 规范的渲染要求， 详细信息/摘要说：

详细信息元素应呈现为块框。 该元素还应该有一个带有两个插槽的内部阴影树。 如果有的话，第一个槽应该采用 details 元素的第一个汇总元素子元素。 如果有的话，第二个槽预计将采用 details 元素的剩余后代。

所以我们只有两个插槽，一个插槽专用于摘要元素。 另一个插槽获取剩余内容，包括::before 和::after 伪元素的内容。 这样的安排只能与 Firefox 的行为一致。