css - Using::after css 在下面不工作

Question

肯定有一些我遗漏的东西，但我试图在我的 css 中使用 ::after，但不幸的是它不起作用。

我的CSS代码如下。

.test {
  height: 40px;
  width: 40px;
  background: #444;
}
.test::after {
  position: relative;
  top: 15px;
  height: 240px;
  width: 240px;
  background: red;
}

<div class="test"></div>

Answer 1

你只需要将content: '' 添加到伪类:after 或:before 并将位置设置为绝对。

.test {
  height: 40px;
  width: 40px;
  background: #444;
  position:relative;
}
.test:after {
  position: absolute;
  top: 15px;
  height: 240px;
  width: 240px;
  background: red;
  content: ''
}

<div class="test"></div>

但是如果你想你可以在没有绝对值的情况下使用它，只需向它添加一些 float ，因为伪类的生成就像在父节点内部一样。

.test {
  height: 40px;
  width: 40px;
  background: #444;
  position:relative;
}
.test:after {
  content: '';
  background: red;
  width: 10px;
  height: 10px;
  float: right;
  
}

<div class="test"></div>

但是如果你需要像图标一样使用它，在 block 内更好的方法是使用绝对值。