![Css: Before and: After Not Working? [Duplicate]](https://docuprint.cloud68.co/uploads/css-before-and-after-not-working-duplicate_1200.jpg)
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;
}
2 Answers
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.
You should use :before and :after selectors with content property:
.chart ul:after{
content: "";
border:1px solid #f30;
}
