如何更改我的列表项的默认分隔符？

Question

在我的style.css我：

.navbar-default .navbar-nav > li > a { 
    color: #fff; 
    border-right: 1px solid rgba(0,0,0,.2); 
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10); 
} 

这使我的菜单显示： 首页|关于|博客|商店|

我会把它想显示： 首页/ /博客/店

有没有人有任何提示我吗？我尝试过：

.navbar-default .navbar-nav > li > a { 
    color: #fff; 
    content: "/" rgba(0,0,0,.2); 
} 

但是，这只是使分隔符完全消失。

Answer 1

你根本不需要position:absolute，因为它是过度杀伤（尽管不是太多矫枉过正）。你可以使用花车来代替：

li { 
 
    display: inline-block; 
 
    margin-left:10px; /* Adjust as needed */ 
 
} 
 
li:not(:first-of-type):after { /* Exempts the first LI */ 
 
    display:block; 
 
    float:left; 
 
    margin-right:10px; /* Adjust as needed */ 
 
    content:"/"; 
 
} 
 

<ul> 
 
    <li>Home</li> 
 
    <li>Show</li> 
 
    <li>About</li> 
 
    <li>Contact</li> 
 
</ul>