CSS:之前和之后:不工作？

Question

我正在尝试使用:before和:after列表,但它不起作用.我确信这是一个简单的错误,但我无法指出它.

任何帮助,将不胜感激

请检查小提琴

<div class="org-chart">
  <ul class="chart chart-prhead">
    <li>
      <span><a href="#">Dabba</a></span>
      <ul class="chart-mgr">
        <li>
          <!-- level 2 -->
          <span><a href="#">Dabba</a></span>

        </li>

      </ul>
    </li>
  </ul>
</div>

.chart ul:after {
  border: 1px solid #f30;
}
.chart li span:after {
  border: 1px solid #eee;
}
.chart li span:before {
  border: 1px solid #ccc;
}
.chart li a:after {
  border: 1px solid #666;
}
.chart li a:before {
  border: 1px solid #333;
}

Answer 1

如果你想要:before和:after工作,你需要给他们content,否则他们并不真正'存在'.最容易做的是,在css中,content: ''为两个伪元素设置.

Answer 2

您应该使用:before,并:after选择与content性能:

.chart ul:after{
  content: "";
  border:1px solid #f30;
}