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

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> <ul> <li> <span><a href="#">Dabba</a></span> <ul> <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;
}