CSS :before and :after not working?
<p>I am trying to use <code>:before</code> and <code>:after</code> with list but it is not working.
I am sure it's a simple mistake but I am not able to point it out.</p>

<p>Any help would be appreciated</p>

<p>Please check the <a href="http://Please%20check%20the%20[fiddle][1]" rel="noreferrer">fiddle</a></p>

<pre><code>&lt;div class="org-chart"&gt;
  &lt;ul class="chart chart-prhead"&gt;
    &lt;li&gt;
      &lt;span&gt;&lt;a href="#"&gt;Dabba&lt;/a&gt;&lt;/span&gt;
      &lt;ul class="chart-mgr"&gt;
        &lt;li&gt;
          &lt;!-- level 2 --&gt;
          &lt;span&gt;&lt;a href="#"&gt;Dabba&lt;/a&gt;&lt;/span&gt;

        &lt;/li&gt;

      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>



<pre><code>.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;
}
</code></pre>