::before 在 HTML 中单独一行做什么？

Question

这可能是一个愚蠢的问题，但如果我有这样的问题：

<div id="topDiv">
  <header id="headerId" class="headerClass" style="display: block;">
    ::before
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </header>
</div>

html 中的 'before' 有什么作用？

我知道如果我在 CSS 中执行以下操作，它会在每个 p 元素之前添加这些属性：（这是来自 W3Schools 示例）

    p::before { 
      content: "Read this -";
      background-color: yellow;
      color: red;
      font-weight: bold;
   }

Answer 1

您看到 ::before 是因为浏览器的开发人员工具就是这样在文档树视图中表示 CSS ::before 伪元素的。

如果您的 HTML 文件中确实有一串文本“::before”，它不会做任何特别的事情，因为它在 HTML 中没有任何意义；它只会在您的页面上显示为文本“::before”。

Answer 2

我想可能有两个原因（它是通过个人经验和观察而不是支持的有效参考）

1) 它根据它们的含义提供了这些伪选择器的可视化表示 ::before 在其应用的 div 之前和 ::after 在其应用的 div 之后

2)伪选择器用于在HTML中插入一些content:''。所以这提供了一个独特的表示。用户可以通过这些伪代码轻松检查 HTML 中插入了哪些内容。

是的，它在每个浏览器上是如何实现和显示伪造的。

祝你好运！

Answer 3

说明您的 html 中有一个伪元素。由于它不是 'real' 元素，因此您无法像使用 'real' 元素（例如 div 和按钮）那样对它进行物理操作。

您可能还会看到 ::after 出现在某些地方，代表您的 id="headerId" 或 class="headerClass" 的某个地方声明了 ::before 元素。

它们没有像 <after></after> 或类似这样的声明的全部原因是因为它是 'a ghost' 或 'shadow' 的 ' 真实元素'，因此在呈现 html 之前只能在 css 中成为 styled/manipulated。

::before 在 HTML 中单独一行做什么？

What does ::before on its own line do in HTML?

html

css

pseudo-element