Separadores para navegação

Preciso adicionar separadores entre os elementos de navegação. Os separadores são imagens.

Minha estrutura HTML é como: ol > li > a > img.

Aqui chego a duas soluções possíveis:

1. Para adicionar mais litags para separação (boo!),
2. Incluir separador na imagem de cada elemento (é melhor, mas possibilita que o usuário clique em, por exemplo, "Home", mas vá para "Serviços", pois estão um atrás do outro e o usuário pode clicar acidentalmente no separador que pertence a "Serviços");

O que fazer?

Basta usar a imagem separadora como imagem de fundo no li.

Para que apareça apenas entre os itens da lista, posicione a imagem à esquerda do li, mas não no primeiro.

Por exemplo:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Este CSS adiciona a imagem a cada item da lista que segue outro item da lista - em outras palavras, todos eles, exceto o primeiro.

NB. Esteja ciente de que o seletor adjacente (li + li) não funciona no IE6, então você terá que apenas adicionar a imagem de fundo ao li convencional (com uma folha de estilo condicional) e talvez aplicar uma margem negativa a uma das bordas.

Se não houver uma necessidade urgente de usar imagens para os separadores, você pode fazer isso com CSS puro.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Isso coloca uma barra entre cada item da lista, assim como a imagem na pergunta original descrita. Mas como estamos usando os seletores adjacentes , ele não coloca a barra antes do primeiro elemento. E como estamos usando o :beforepseudo seletor, ele não coloca um no final.

Você pode adicionar um lielemento onde deseja adicionar divisor

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

Em CSS, você pode adicionar o seguinte código.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Isso aumentará sua velocidade de execução, pois não carregará nenhuma imagem. apenas teste .. :)

A outra solução está OK, mas não há necessidade de adicionar o separador no último se usar : depois ou no início se estiver usando : antes .

TÃO:

caso: depois

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

case: antes

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Para obter o separador centralizado verticalmente em relação ao texto do menu,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Adicione o separador ao lifundo e certifique-se de que o link não expanda para cobrir o separador, o que significa que o separador não será clicável.

Para aqueles que usam Sass , escrevi um mixin para este propósito:

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

Exemplo:

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

O que lhe dará isso:

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

Eu acredito que a melhor solução para isso, é o que eu uso, e essa é uma borda css natural:

border-right:1px solid;

Pode ser necessário cuidar do preenchimento como:

padding-left: 5px;
padding-right: 5px;

Finalmente, se você não quiser que o último li tenha essa borda separada, dê a seu último filho "nenhum" em "borda direita" assim:

li:last-child{
  border-right:none;
}

Boa sorte :)

Coloque-o como plano de fundo no elemento da lista:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

A seguir, recomendo uma marcação diferente para acessibilidade:
vez de incorporar as imagens embutidas, coloque o texto como texto, coloque uma extensão em cada uma, aplique a imagem como plano de fundo no e, em seguida, oculte o texto com display: none - this oferece muito mais flexibilidade de estilo e permite que você use tiling com uma imagem bg de 1px de largura, economiza largura de banda e você pode incorporá-lo em um sprite CSS, o que economiza chamadas HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

ATUALIZAÇÃO OK, vejo que outros obtiveram respostas semelhantes antes de mim - e observo que John também inclui um meio para evitar que o separador apareça antes do primeiro elemento, usando o seletor li + li - o que significa qualquer li vindo após o outro li.