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

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; 
}