在每個內嵌li之間放置一個分隔符但不在邊緣

Question

是否可以在每個內聯<li>之間放置一個分隔符，但是它只能在行中的每個項目之間出現，而不會出現在行的開頭或結尾？ 如果不能用CSS來完成，那麼也許可以用JavaScript/jQuery解決？

http://codepen.io/anon/pen/Pbxddo

<ul> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li> 
    <li>Something</li> 
</ul> 

ul { 
    list-style-type: none; 
    padding: 10px; 
    li { 
    display: inline; 
    &:after { 
    padding-left: 5px; 
     content: '|'; 
    } 
    } 
} 

編輯：我想沒有人理解......我想是要刪除所有分隔符是在開始時或在每一行的末尾，我不不知道如何寫得更清楚。

在此圖像中這個分隔符應刪除

這樣的結果會是這樣

Answer 1

使用li:last-child選擇，如：

li:last-child:after { 
    content: ''; 
} 

有一個看下面的代碼片段，或Codepen（機智h SCSS）。

div { 
 
    border: 3px solid #333; 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
ul li { 
 
    display: inline; 
 
    font-size: 20px; 
 
} 
 
ul li:after { 
 
    padding-left: 5px; 
 
    content: '|'; 
 
} 
 
ul li:last-child:after { 
 
    content: ''; 
 
}

<div> 
 
<ul> 
 
    <li>Something</li> 
 
    <li>Something else</li> 
 
    <li>Bananas, apples </li> 
 
    <li>Tea and cookies</li> 
 
    <li>Football or soccer</li> 
 
    <li>sky, earth, trees, nature</li> 
 
    <li>Furniture, painting, closet, bed, carpet</li> 
 
    <li>window, clothes, light, door</li> 
 
    <li>Something else in the room</li> 
 
    </ul> 
 
</div>

希望這有助於！

Answer 2

您可以將您的css改成這樣：

ul { 
    list-style-type: none; 
    padding: 10px; 
    li { 
    display: inline; 
    font-size: 20px; 
    &:after { 
    padding-left: 5px; 
     content: '|'; 
    } 
    } 
    li:last-child { 
    display: inline; 
    font-size: 20px; 
    &:after { 
    padding-left: 5px; 
     content: ''; 
    } 
    } 
} 

Answer 3

您可以使用not()僞類，並選擇除最後一個所有li元素。

ul { 
 
    display: flex; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
li:not(:last-child):after { 
 
    content: '|'; 
 
    padding: 0 10px; 
 
}

<ul> 
 
    <li>Something</li> 
 
    <li>Something</li> 
 
    <li>Something</li> 
 
    <li>Something</li> 
 
</ul>

Answer 4

這是比所有的（正確）的不同的方法：最後一個孩子的答案。使用adjacent sibling selector：+。這會選擇緊接在li後面的第二個li。在你的背景下，這將選擇所有，但第一li元素：

ul { 
    list-style-type: none; 
    padding: 10px; 
    li { 
    display: inline; 
    } 
    li + li { 
    &:before { 
    padding-right: 5px; 
     content: '|'; 
    } 
    } 
} 

這裏的工作片段演示你的例子：

div { 
 
    border: 3px solid #333; 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
ul li { 
 
    display: inline; 
 
    font-size: 20px; 
 
} 
 
ul li + li:before { 
 
    padding-right: 5px; 
 
    content: '|'; 
 
}

<div> 
 
<ul> 
 
    <li>Something</li> 
 
    <li>Something else</li> 
 
    <li>Bananas, apples </li> 
 
    <li>Tea and cookies</li> 
 
    <li>Football or soccer</li> 
 
    <li>sky, earth, trees, nature</li> 
 
    <li>Furniture, painting, closet, bed, carpet</li> 
 
    <li>window, clothes, light, door</li> 
 
    <li>Something else in the room</li> 
 
    </ul> 
 
</div>

就個人而言，我更喜歡這種方法，因爲它是不詳細，並且不需要「覆蓋」。