CSS :before and :after not working? [duplicate]

Question

I am trying to use :before and :after with list but it is not working. I am sure it's a simple mistake but I am not able to point it out.

Any help would be appreciated

Please check the 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

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

Answer 2

You should use :before and :after selectors with content property:

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