リストの素朴な疑問

css

よく横並びのヘッダやフッタのメニューってあるじゃないですか。
例えばこんなの↓

これってスタイル切ると、多くの場合こんな感じなんです。リストの区切りを付けたいってのは分かる…スゲーよく分かる。ただのリンクテキストをメニューとして認識できるからなァ…だが「｜」ってどういうことだァ〜ッ！？ナメやがってこの「｜」超イラつくぜェ〜ッ！チクショーッ！「｜」ってどういう事だよッ！ナメやがってクソッ！クソッ！
とボクはいつも思うのです。
メニューをちゃんとCSSで作れてるんだから、タテ棒くらいもCSSで書けばいい。誰だってそうする。俺だってそうする。
こんな感じで↓（ドラッグすればテキストの「｜」ではないと分かります）

しかしナゼか｜を打ち込んでいるところが多いのはなぜなんでしょうか。単に数行のスタイル追加するのが面倒って以外に何か理由があるんでしょうか。理由を知っている人がいたら教えてください。