CSS - ¿Cómo añadir puntos entre el título de navegación

Question

Después me conecto www.linkedIn.com, la barra de navegación en la parte superior derecha muestra el título de la siguiente manera:

Welcome, XXX * Skip to Content * Search * Add Connections * Settings * Help * Sign Out 

me gustaría saber cómo se agregan entre * diferentes títulos He usado Firebug pero no vi dónde agregan un pequeño * entre los títulos.

Gracias

Answer 1

Aquí es lo que utilizan parte de LinkedIn:

#nav-utility li:before{content:'\00B7';padding-right:5px;} 

es decir, que están usando CSS para añadir un carácter adicional antes de cada elemento de la lista. '\00B7' es un punto medio en Unicode. :before es un pseudo-elemento en CSS; le permite actuar como si hubiera un elemento antes del contenido de un elemento (en este caso, antes del contenido del elemento <li>), y puede usar la propiedad content para insertar algún contenido en ese pseudo elemento. Para espaciarlo adecuadamente, agregan algo de relleno.

Si nos fijamos en un extracto de un poco más grande, parece que utilizan un truco (anteponiendo una propiedad con *, lo que hará que otros navegadores hacer caso omiso de la propiedad, pero las versiones antiguas de IE para utilizar esa propiedad como si el * no estabas t allí) que insertará una imagen de fondo, por lo que los navegadores más antiguos que no admitan el pseudo-elemento :before seguirán recibiendo la viñeta.

#nav-utility li{font-size:110%;color:#666;*background:url(http://static02.linkedin.com/scds/common/u/img/bg/bg_grey_dotted_h-line_3x1.png) no-repeat 0 7px;padding-right:2px;*padding-right:6px;*padding-left:6px;*zoom:1;} 
#nav-utility li:last-child{padding-right:0;} 
#nav-utility li:before{content:'\00B7';padding-right:5px;} 

Answer 2

Puede utilizar el: después de pseudo-selector:

HTML:

<span>Item 1</span> 
<span>Item 2</span> 
<span>Item 3</span> 
<span class="last">Item 4</span> 

CSS:

span:after { 
    content: '*'; 
} 
span.last:after { 
    content: ''; 
} 

Puedes probarlo aquí: http://jsfiddle.net/4EAwR/

Answer 3

Aquí es el CSS relevante: #nav-utility li:before{content:'\00B7';padding-right:5px;}

El content:'\00B7'; se refiere al código ISO para un poco de carácter de punto. Ese personaje se coloca justo antes de cada li dentro de # nav-utility.

Answer 4

En lugar de

span:after { 
content: '*'; 
} 
span.last:after { 
content: ''; 
} 

hacer

span:after { 
content: '*'; 
} 
span:last-child:after { 
content: ''; 
} 

De esta manera usted no tiene que dar el último de una clase especial.