CSS :before と :after が機能しない? [重複] 質問する

:beforeリストでand を使用しようとしています: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;
}