Текстовые разделители для элементов LI

Ответ 1

Вы можете использовать псевдоэлементы для включения текста после элемента, и вы можете использовать селектор CSS3 для удаления конечной косой черты из последнего элемента.

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

EDIT:

Все это можно сделать в одной строке с лучшим CSS3.

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

EDIT: EDIT:

Это еще проще.

#footer_menu li + li:before {
    content: "/";
}

Ответ 2

Это мое решение для элемента LI, разделенного | (труба):

li + li:before {
    content: " | ";
}

Комбинатор смежности (знак плюса +) подходит в этом случае. Это позволяет вам стилизовать элемент, если ему непосредственно предшествовал другой заданный элемент. Поскольку первому li не предшествует другое li, у него не будет содержащегося в нем контента. Это намного меньше, чем:

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}

Ответ 3

Вы можете поместить содержимое li в диапазон, а затем использовать CSS:

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

Или что-то подобное.

изменить Ах, как сказал Кайл, но добавление правила last_child более полно.

Ответ 4

Для тех, кто использует Sass, я написал mixin для этой цели:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Пример:

@include addSeparator('li', '|', 1em);

Это даст вам следующее:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Ответ 5

Если вы пытаетесь сделать что-то вроде Поддержка клиентов/Информация о доставке/Графики/Политика конфиденциальности/Контакты Вы могли бы просто сделать это с помощью CSS

Вам нужно добавить "первый" класс в первый li в вашем наборе, как показано ниже.

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

И затем следующий CSS

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

Это положит все элементы li рядом друг с другом и даст вам границу. Результат будет выглядеть примерно так:

Поддержка клиентов | Информация о доставке | Графики размеров | Политика конфиденциальности | Свяжитесь с нами

Ответ 6

почему бы вам не добавить лили между каждым текстом, содержащим li с /, и добавить css в этот li для обеспечения интервала?

<ul id="footer_menu">
    <li>Customer Support</li>
    <li class='spacer'>/</li>
    <li>Shipping Info</li>
    <li class='spacer'>/</li>
    <li>Size Charts</li>
    <li class='spacer'>/</li>
    <li>Privacy Policy</li>
    <li class='spacer'>/</li>
    <li>Contact</li>
</ul>
<style>
.spacer{width:20px;}
</style>

Недействительная разметка для добавления элементов <LI> в <ul>. Либо это, либо использовать другой тип элемента html, например <p> или <divs>