CSS :before and :after not working?
CssCss Problem Overview
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;
}
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
You should use :before
and :after
selectors with content
property:
.chart ul:after{
content: "";
border:1px solid #f30;
}