使用::之后css不工作

Question

必须有一些我缺少的东西，但我想在我的CSS中使用::after，但遗憾的是它不起作用。

我的css代码如下。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

但是如果你想要你可以不加绝对地使用它，只需添加一些浮点数，因为伪类在父节点内生成。

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

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

但是如果你需要像图标那样使用它，那么在块内更好地使用绝对值。