CSS :before and :after not working?

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;
}

150777 次浏览

小开

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

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

小开

最佳答案

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.