::after 似乎没有达到我的预期？ [复制]

Question

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

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

https://jsfiddle.net/xd6L3h6v/

<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 的 DOM 检查器中看不到 ::before 部分。

我哪里错了？

谢谢！

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>