::after 似乎没有达到我的预期？

Question

我可能误解了 CSS 中的 ::before 和 ::after 功能。

我想要实现的是一个 200x200 像素的框，然后在右上角会有另一个框 (24x24)。这是我得到的：

<div id="foo">bla test</div>

#foo {
    position: relative;
    width: 200px;
    height: 200px;
    background: green;
}
#foo::before {
    position: absolute; top: 0; left: 0;
    background: red;
    width: 24px;
    height: 24px;
}

但是，这不起作用。当我在 Firefox 中检查它时，我没有在 Firebug 中看到 ::before 部分DOM 检查员.

我哪里错了？

谢谢！

Answer 1

您只需添加content: '';

#foo {
  position: relative;
  width: 200px;
  height: 200px;
  background: green;
}
#foo::before {
  position: absolute; top: 0; left: 0;
  background: red;
  width: 24px;
  height: 24px;
  content: '';
}

<div id="foo">bla test</div>

::after 似乎没有达到我的预期？

::after doesn't seem to do what I'm expecting?

css

pseudo-element