CSS :before 和 :after 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35180361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :before and :after not working?
提问by Tom
I am trying to use :beforeand :afterwith list but it is not working.
I am sure it's a simple mistake but I am not able to point it out.
我正在尝试使用:before和:after列表，但它不起作用。我确信这是一个简单的错误，但我无法指出。
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;
}
回答by GMchris
If you want :beforeand :afterto 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.
如果你想:before和:after工作，你需要给他们content，否则他们并不真正“存在”。最简单的做法是，在 css 中，content: ''为两个伪元素设置。
回答by Enver Dzhaparoff
You should use :beforeand :afterselectors with contentproperty:
您应该使用:before和:after选择器与content属性：
.chart ul:after{
content: "";
border:1px solid #f30;
}
