在导航链接之间创建管道的问题

Question

我需要在导航链接之间创建和居中管道|。我目前正在努力将它们集中在一起。我做了这个小提琴 - http://jsfiddle.net/ppqq6Lj3/：

.header-links {
    float:right;
    overflow:hidden;
}
.header-links li {
    float:left;
    font-family:'Oswald', sans-serif;
    font-size:13px;
    line-height:16px;
    text-transform:uppercase;
    padding-left: 20px;
    padding-right: 20px;
}
.header-links li:first-child {
    padding-left:0px;
}
.header-links li:last-child {
    padding-right:10px;
}
.header-links li a {
    text-decoration:none;
    color:#000;
}
.header-links li a:hover {
    color:#313131;
}
.header-links li + li::before {
    content:" | ";
}

ul, li {
    list-style-type: none;
}

如何在链接之间居中管道？另外，我如何改变管道颜色？

提前谢谢。

Answer 1

玩位置：

http://jsfiddle.net/coma/tLjw5cLd/2/

.header-links li {
    position: relative;
    ...
}

.header-links li + li::before {
    content:"|";
    position: absolute;
    left: 0;
    top: 0;
    color: red;
}