Основная проблема заключается в том, что вы используете контент (символы канала) для презентации (декорирования).Избежать этого - одна из основных причин использования CSS.Представьте себе человека с нарушениями зрения, который использует ваш сайт.Как их программа чтения с экрана должна произносить "|"?Если вы не уверены, скорее всего, его следует перенести с уровня содержимого (HTML) на уровень представления (CSS).(На самом деле программы чтения с экрана достаточно умны, чтобы избежать этой распространенной ошибки, но это все же полезное умственное упражнение.)
Вы можете, как предполагает @ChrisN, использовать border-right или -left, но другой вариант -используйте селектор :after.Например, вместо этого:
<nav>
<ul>
<li>Foo</li> |
<li>Bar</li> |
<li>Baz</li>
</ul>
</nav>
Удалите каналы из вашего контента:
<nav>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
И затем используйте селектор :after в вашем уровне представления (CSS) для размещения каналовмежду ними:
@media ... {
nav li:after {
content: "|";
}
/* no "|" after the last one, though */
nav li:last-child:after {
content: normal;
}
}
Конечно, вы можете использовать свойства padding, чтобы поместить желаемое количество места вокруг "|".
Этот подход позволяет избежать утяжеления вашей страницы с дополнительнымиразметка, а также дает вам больше гибкости, чем, например, border-right, поскольку вы можете использовать изображение, или несколько символов или символов, или некоторую комбинацию, вместо простой линии.