当前位置: 首页 > 知识库问答 >
问题:

是否可以使用CSS从伪元素内容插入HTML标记?[副本]

岑经纶
2023-03-14

我试图使用伪元素::before插入

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

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


共有2个答案

燕超
2023-03-14

您不能将超文本标记语言插入到内容中:::bef伪元素的属性——CSS规范不允许这样做。

但是,您可以模拟

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>

龙弘盛
2023-03-14

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

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

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

article::before {
  content: "";
  border: 1px inset;
  box-sizing: border-box;
  color: gray;
  display: block;
  height: 2px;
  margin: 0.5em auto;
}
html prettyprint-override"><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>
 类似资料:
  • 问题内容: 只是想知道是否有可能以某种方式使CSS属性插入html代码而不是在上插入字符串或类似这样的元素: 这将非常方便…可以通过Javascript完成,但是使用CSS确实可以使生活更轻松:) 问题答案: 不幸的是,这是不可能的。根据规格: 生成的内容不会更改文档树。特别是,它不会反馈到文档语言处理器(例如,用于重新解析)。 换句话说,对于字符串值,这意味着始终按字面意义对待该值。无论使用哪种

  • 如何通过内容插入超文本标记语言标签:e::bef伪元素的属性,我正在尝试一个 但这行不通。是否有其他方法将超文本标记语言插入到伪元素CSS中? 谢谢,

  • 我可以在标记中使用元素吗? 在FF中,Opera和Safari很好地打印在屏幕上,但是当我使用检查(或Firebug)时,它找不到a标签的元素洞察。 例如,典型的超文本标记语言: 是错误吗?

  • 问题内容: 使用以下语法时,不必为每种类型的属性和事件繁琐地搜索解决方法: 有没有一种方法可以将整个HTML元素声明为字符串?喜欢: 问题答案: 创建片段然后插入该片段可能会更好,而不是直接弄乱它: 好处: 您可以使用本机DOM方法进行插入,例如insertBefore,appendChild等。 您可以在插入实际的DOM节点之前对其进行访问;您可以访问片段的childNodes对象。 使用文档片

  • 主要内容:1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词,通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号 与选择器相连。但在 C

  • CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法:selector:pseudo-element {property:value;} CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中,浏览器会根据 "