html - :after tag not working properly with <li>

Question

我想显示一个 content"--"在每个列表项之后但是当我使用 li:after 时然后内容出现在列表项下方，当我使用 a:after 时然后内容正确地出现在列表项之后。但是我想要 content"--"与 <li> 关联而不是 <a>因为我什么时候会用a:hover那么就会有一些问题。这是代码。谁能帮忙？

HTML

<ul class="group">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>

CSS*

.group:after {
    content: "";
    display: table;
    clear: both;
}

ul {
    list-style:none;
    background:gray;
}

li {
    float:left;
    padding-left:30px;
}

a {
    text-decoration:none;
    display:block;
    padding:10px;
    color:white;
    font-weight:bold;
}

li:after{ content:'--'; }

Answer 1

这里的问题是元素 :after 是在 a 标签之后呈现的，因为你把它放到了 a 标签中:

a {
  display:block;
}

:after 内容位于由 block 标签推送的下一层。更改此设置，您会看到更改:

a {
  display:inline-block;
}

演示 http://jsfiddle.net/6YuQ8/3/