html - 在链接之前添加内容（但在链接之外）

Question

这是我的代码：

<style>
#links-div a {
    display: inline-block;
}

#links-div a:not(:first-child):before {
    content: " - ";
}
</style>

<div id = "links-div">
    <a href = "#">Link 1</a>
    <a href = "#">Link 2</a>
    <a href = "#">Link 3</a>
    <a href = "#">Link 4</a>
</div>

破折号/连字符添加在所有链接之前（第一个链接除外），但它添加在链接中。

是否可以将其从锚中取出？它不应该在锚标签之前添加内容吗？

我唯一的解决方案是将每个链接放在列表中吗？由于它是一个列表，我不介意，但这只会节省一点时间。

干杯，

缺口

Answer 1

您可以在 ul 列表中添加您的链接

HTML

<div id = "links-div">
    <ul>
        <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>
    </ul>
</div>​

CSS

#links-div ul li {
    display: inline-block;
}    
#links-div ul li:not(:first-child):before {
    content: " - ";
}
​

演示http://jsfiddle.net/mKQas/1/