是否可以使用 CSS 从伪元素内容中插入 HTML 标签？ [复制]答案

【问题标题】：Is it possible to insert an HTML tag from pseudo-element content using CSS? [duplicate]是否可以使用 CSS 从伪元素内容中插入 HTML 标签？ [复制]
【发布时间】：2021-03-14 18:57:31
【问题描述】：

我正在尝试使用伪元素::before 在每个<article> 标签之前插入一个<hr>，到目前为止我有：

  article::before {
    content: "\003C br \\ \003E";
  }

但这不起作用。有没有其他方法可以将 HTML 标签插入到伪元素 CSS 中？

【问题讨论】：

请不要交叉发布问题。

标签： html css

【解决方案1】：

正如@rounin 所说，您不能在生成的内容中插入 html。

但hr 只是一个具有自定义 CSS 样式的元素。

您可以为生成的内容重新创建样式

article::before {
  content: "";
  border: 1px inset;
  box-sizing: border-box;
  color: gray;
  display: block;
  height: 2px;
  margin: 0.5em auto;
}

<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nihil odit impedit ipsam et ducimus.</article>
<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti!
</article>

【讨论】：

完美地复制了
标签，谢谢。

【解决方案2】：

您不能将 HTML 标记插入到 ::before 伪元素的 content: 属性中 - CSS 规范不允许这样做。

但是，您可以在文章内容之前模拟<hr>（如果您需要的话），只需声明margin-top:，然后是border-top:，然后是padding-top: p>

article {
  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  padding-top: 12px;
}

<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nihil odit impedit ipsam et ducimus.</article>
<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti!
</article>

【讨论】：