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 {
  display:block;
}

:after内容由block标记推送到下一级别。改变这一点，你会看到变化：

a {
  display:inline-block;
}

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

：标签与<li> </li>无法正常工作后

1 个答案: