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

Question

我正在尝试将:before和:after与列表一起使用，但它无效。 我确信这是一个简单的错误，但我无法指出它。

任何帮助将不胜感激

请查看fiddle

<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提供，否则他们不会真正存在＆＃39;。最简单的方法是在css中为两个伪元素设置content: ''。

Answer 2

您应该将:before和:after选择器与content属性一起使用：

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