スラッシュで項目を分けたリストの表示をCSS ::before で

ブログから転載します。
スラッシュで項目を分けたリストの表示をCSS ::before で

お題

支店： ニューヨーク / 大阪 / ホーチミン市 / プノンペン

こういうやつ、最後のスラッシュがないのがポイント。どうするか、結構めんとくさい。

1. Rubyの場合、下のような感じ

ruby

支店: 
<%= @branches.collect{|branch| branch.name }.join(' / ') %>

わりとスマート。問題なし

2. PHPの場合、下のような感じ

php

支店: 
<?php foreach($branches as $index => $branch)
{ if ($index != 0) echo " / "; echo $branch->name; } ?>

なんか違うかも。

3. Twigの場合、下のような感じ

例１)

twig

支店: {% なんか長くてややこしいコード %}

例２)

twig

支店: {% $branches|list_names_with_seperater(' / ') %}

…..考えるのもいや。

4. 解決策 by CSS

HTMLは普通に羅列するだけ。で囲むのがポイント

html

支店: 
<span class="inline-item">ニューヨーク</span>
<span class="inline-item">大阪</span>
<span class="inline-item">ホーチミン市</span>
<span class="inline-item">プノンペン</span>

::before 擬似要素で / を入れていく、:first-child は表示しない

css

.inline-item::before {
  content: "/";
  margin-left: .5em;  
  margin-right: .5em;  
}
.inline-item:first-child::before {
  content: none;
}

追記：もっとスマートな方法 by @ShibuyaKosuke さん

css

.inline-item + .inline-item::before {
  content: "/";
  margin-left: .5em;  
  margin-right: .5em;  
}

なんか長年の問題が解決して嬉しい。スッキリ。

参考: プログラム組んだら負け！実はHTML/CSSだけでできること2015夏