::之后似乎没有做我期待的事情？

Question

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

我想要实现的是一个200x200px的盒子，然后在右上角它将有另一个盒子（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 部分。< / p>

我哪里错了？

谢谢！

Answer 1

您只需添加content: '';

即可

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;