css - 如何在 HTML 分区标记之前或之后出现某些内容？

Question

实际上，我有一个 div 标签，我运行如下代码:

<div class="navbar-text">someText</div>

...

.navbar-text:before {
  display: block;
  height: 20px;
  width: 20px;
  background: #f00;
}

但是我看不到红色方 block 。我怎样才能让它出现？

Answer 1

如果没有 content 属性，

::before 或::after 将无法工作。它可能是空的，但它必须在那里。

.navbar-text:before {
  content: '';
  display: block;
  height: 20px;
  width: 20px;
  background: #f00;
}

<div class="navbar-text">someText</div>