CSS内联内容之后

Question

我已经构建了一个列表导航，并希望在实现CSS而不是HTML的每个列表项之间添加“*”。我目前建立的是：

<ol>
    <li>
        <a href=''>List item 1</a>
    </li>
    <li>
        <a href=''>List item 2</a>
    </li>
</ol>

显然这构建

1. 列出项目1
2. 列出项目2

在CSS中我写过：

ol{
   list-style-type:none;
   margin:0px;
   padding:0px;
}
ol>li{
   float:left;
}
ol>li>a{
   display:block;
   padding:2px 7px;
}

这构建：

列表项1列表项2

JSFiddle当前发生的事情：http://jsfiddle.net/v7eG7/

我的问题是如何使用after将'*'符号添加到文档内容中，但保持列表项和后续内容彼此一致？

列表项目1 *列表项目2

Answer 1

假设您尝试ol>li:after {content:'*';}或类似问题，问题是您在display:block元素上设置了a，这会强制*位于其下方的一行。< / p>

请考虑将a display:block更改为display:inline-block。

Answer 2

您必须添加：

ol > li:after {
    content: "*";   
    vertical-align:middle;
}

并改变：

ol > li > a {
    display:block;
}

要：

ol > li > a {
    display:inline;
}

以下是演示fiddle

如果你想要没有*的最后一个元素，你必须添加：

ol > li:last-child:after {
    content: none;
}

演示fiddle