title: CSS :before and :after not working?
body: <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>