CSS - Comment ajouter des points entre le titre de navigation

Question

Après je me connecte www.linkedIn.com, la barre de navigation en haut à droite affiche le titre comme suit:

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

Je voudrais savoir comment ils ajoutent * entre différents titres. J'ai utilisé firebug mais je n'ai pas vu où ils ajoutent un si petit * entre les titres.

Merci

Answer 1

Voici ce qu'ils utilisent sur LinkedIn:

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

qui est, ils utilisent CSS pour ajouter un caractère supplémentaire avant chaque élément de la liste. '\00B7' est un point central en Unicode. :before est un pseudo-élément en CSS; il vous permet d'agir comme s'il y avait un élément avant le contenu d'un élément (dans ce cas, avant le contenu de l'élément <li>), et vous pouvez utiliser la propriété content pour insérer du contenu dans cet élément pseudo. Afin de l'espacer correctement, ils ajoutent un peu de rembourrage.

Si vous regardez un extrait légèrement plus grand, il semble qu'ils utilisent un hack (préfixer une propriété avec *, ce qui entraînera d'autres navigateurs d'ignorer la propriété, mais les anciennes versions de IE à utiliser cette propriété comme si le * weren » t là) qui va insérer une image d'arrière-plan, donc les anciens navigateurs qui ne supportent pas le pseudo-élément :before recevront toujours la balle.

#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

Vous pouvez utiliser le: après pseudo-sélecteur:

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: ''; 
} 

Vous pouvez essayer ici: http://jsfiddle.net/4EAwR/

Answer 3

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

Le content:'\00B7'; fait référence au code ISO pour un caractère peu de points. Ce personnage est alors placé juste avant chaque li dans # nav-utility.

Answer 4

Au lieu de

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

do

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

De cette façon, vous ne devez pas donner la dernière une classe spéciale.