Question

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

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

但这不起作用。是否有其他方法将HTML标记插入伪元素CSS？

Answer 1

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

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

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

Answer 2

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

是否可以使用CSS从伪元素内容插入HTML标记？

2 个答案: