Separadores para navegación

Necesito agregar separadores entre elementos de navegación. Los separadores son imágenes.

Mi estructura HTML es como: ol > li > a > img.

Aquí llego a dos posibles soluciones:

1. Para agregar más lietiquetas de separación (¡boo!),
2. Incluir un separador en la imagen de cada elemento (esto es mejor, pero existe la posibilidad de que el usuario haga clic en, por ejemplo, "Inicio", pero acceda a "Servicios", porque están uno detrás del otro y el usuario puede hacer clic accidentalmente en el separador que pertenece a "Servicios");

¿Qué hacer?

Simplemente use la imagen del separador como imagen de fondo en el li.

Para que solo aparezca entre los elementos de la lista, coloque la imagen a la izquierda del liprimero, pero no en el primero.

Por ejemplo:

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

Este CSS agrega la imagen a cada elemento de la lista que sigue a otro elemento de la lista; en otras palabras, todos ellos excepto el primero.

NÓTESE BIEN. Tenga en cuenta que el selector adyacente (li + li) no funciona en IE6, por lo que tendrá que agregar la imagen de fondo al li convencional (con una hoja de estilo condicional) y quizás aplicar un margen negativo a uno de los bordes.

Si no hay una necesidad urgente de usar imágenes para los separadores, puede hacerlo con CSS puro.

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

Esto coloca una barra entre cada elemento de la lista, tal como se describe en la imagen de la pregunta original. Pero como estamos usando los selectores adyacentes , no coloca la barra antes del primer elemento. Y como estamos usando el :beforepseudo selector, no pone uno al final.

Puede agregar un lielemento donde desee agregar 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>

En CSS puede agregar el siguiente código.

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

Esto aumentará su velocidad de ejecución ya que no cargará ninguna imagen. solo pruébalo .. :)

La otra solución está bien, pero no es necesario agregar un separador al final si usa : after o al principio si usa : before .

ENTONCES:

caso: después

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

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

caso: antes

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

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

Para obtener el separador centrado verticalmente en relación con el texto del menú,

.menustyle li + li:before

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

Agregue el separador al lifondo y asegúrese de que el enlace no se expanda para cubrir el separador, lo que significa que no se podrá hacer clic en el separador.

Para aquellos que usan Sass , he escrito un mixin para este propósito:

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

Ejemplo:

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

Lo que te dará esto:

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

Creo que la mejor solución para esto es lo que uso, y ese es un borde css natural:

border-right:1px solid;

Es posible que deba cuidar el acolchado como:

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

Finalmente, si no quieres que el último li tenga ese borde separado, dale a su último hijo "none" en "border-right" así:

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

Buena suerte :)

Ponlo como fondo en el elemento de la 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 continuación, recomiendo un marcado diferente para la accesibilidad:
lugar de incrustar las imágenes en línea, coloque el texto como texto, rodee cada uno con un intervalo, aplique la imagen como fondo y luego oculte el texto con display: none - this brinda mucha más flexibilidad de estilo y le permite usar el mosaico con una imagen bg de 1px de ancho, ahorra ancho de banda y puede incrustarlo en un sprite CSS, lo que ahorra llamadas 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;}

ACTUALIZAR OK, veo que otros obtuvieron una respuesta similar antes que yo, y noto que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, usando el selector li + li, lo que significa que cualquier li viene después de otro li.