Как сделать в навигационном меню ровный разделитель «|» между ссылками на страницы?

Question

[devKazhan]

Верстаю с макета страничку.

не могу понять как сделать такие разделители. Бордером не выходит, потому что выходить слишком высоким. Пытался сделать бекграундом картинкой - тоже лажа. Подскажите, если кто знает, пожалуйста

Comments

[Lynn «Кофеман»]

И чем вас не устраивает собственно символ | ?

[devKazhan]

Алексей Тен: если я просто его поставлю после каждого слова, то выходит не ровно. т.е. не соответствие макету. должен же быть способ сделать ровно это дело

Answer 1

[Алексей]

Можно использовать псевдо-элементы: либо :after либо :before
В качестве контента указать "|"
Ну и соответственно выровнять:

• С помощью абсолютного позиционирования для псевдоэлемента
  
• Либо задав для псевдо элемента display: inline-block; и выравнивая с помощью margin и padding
  

Answer 2

[Андрей Ломовой]

Еще можно сделать так (это конечно не самое лучшее, но и не худшее решение)

codepen.io/AndyLom/pen/xEEgrZ

Answer 3

[display: block]

Используй line-height;

Comments

[Кирилл]

codepen.io/Kublyakov/pen/QKKdVq - вот на кодпене пример.

Answer 4

[Кира]

Первый ответ тут