【问题标题】:Add pseudo element ::before & ::after to html tag [closed]将伪元素 ::before 和 ::after 添加到 html 标签 [关闭]
【发布时间】:2015-03-18 18:47:40
【问题描述】:

我是使用伪元素的新手,我正在努力实现一些目标,但它不起作用,而且在互联网上的任何地方都找不到。

我想将 ::before 和 ::after 添加到 <header> 标记。但是怎么做? 甚至可能吗?还是我完全错误地理解了伪元素?

【问题讨论】:

  • 我认为您想将“css”作为标签添加到您的问题中
  • Stackoverflow 编辑器中的一个图标被标记为代码片段。单击它并向我们展示一个演示问题的测试用例。正如@sircapsalot 的回答所显示的,您希望它成为可能,但我们无法在没有看到您的代码的情况下说明您的代码为何无法工作。
  • 在深入挖掘之后,我发现我的 header::before、header::after 位于 css 的 header 标记中。我觉得很愚蠢xD谢谢大家:)!

标签: html css pseudo-element


【解决方案1】:

您可能没有设置任何内容。

header::before, header::after {
  content: "";
  ...
}
<header>
  My header
</header>

当我添加它时,我得到了这个:

【讨论】:

  • 我的意思是,当我检查我的标题元素时,它没有 ::before / ::after 元素。
  • 我在里面放了一张照片。单击“运行代码 sn-p”并检查标题
  • 当我添加内容时:"";它仍然没有添加它们。 (我编辑了我的帖子,见图片)
  • @yinshiro 它没有显示,因为它是由 CSS 生成的,并且在文档本身中仍然不存在。 dom 检查器永远不会向您显示它,因为它不是 DOM 的一部分。
  • @GCyrillus — 它确实显示为这个答案中的屏幕截图已经展示了。
猜你喜欢
  • 2021-11-24
  • 2012-04-05
  • 2017-09-26
  • 2012-01-27
  • 2020-09-20
  • 1970-01-01
  • 2011-04-02
  • 2015-03-17
  • 2015-09-12
相关资源
最近更新 更多