为什么在伪标记之前未出现在代码中？

Question

我有以下CSS代码：

#Top_bar #menu-home.menu-main li.menu-item a span:before {
content: "";
background: linear-gradient(to bottom, transparent 50%, rgb(254, 203, 8, 1) 50%);
}

但是我的before标记没有出现在span元素中：

仅以前生成的after标签。

如何显示我的before标签？ 谢谢！

Answer 1

:before和:after将伪元素放置在父元素中。您需要在dev-tools / inspector中展开span标签以查看它们。

#element:before {
  content: 'before';
  display: block;
}
#element:after {
  content: 'after';
  display: block;
}

<div id="element">element</div>

由于您将它们放置在span元素中，因此它们会继承其样式。请根据需要的样式/效果，在需要调整其样式的浏览器中显示（空）伪元素，例如display: block等。