CSS - Jak dodać kropkę między tytułem nawigacji

Question

Po zalogować www.linkedin.com, pasek nawigacyjny na górze po prawej wyświetla tytuł w następujący sposób:

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

Chciałbym wiedzieć, w jaki sposób dodać * pomiędzy różne tytuły. Użyłem firebug, ale nie widziałem, gdzie dodają tak małe * między tytułami.

Dziękuję

Answer 1

Oto co używają na LinkedIn:

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

Oznacza to, że są one za pomocą CSS, aby dodać dodatkowy znak przed każdym elemencie listy. '\00B7' to środkowa kropka w kodzie Unicode. :before to pseudoelement w CSS; pozwala ci działać tak, jakby był element przed treścią elementu (w tym przypadku przed treścią elementu <li>) i możesz użyć właściwości content, aby wstawić zawartość do tego pseudo elementu. Aby poprawnie go umieścić, dodają dopełnienie.

Jeśli spojrzeć na nieco większy fragment, wydaje się, że używać hack (poprzedzając właściwość z *, co spowoduje innych przeglądarek zignorować właściwość ale starsze wersje IE wykorzystać tę właściwość jakby * weren” t), które wstawi obraz tła, więc starsze przeglądarki, które nie obsługują pseudoelementu :before, nadal otrzymają punktor.

#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

można użyć: po pseudo-selektor:

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

Można spróbować tutaj: http://jsfiddle.net/4EAwR/

Answer 3

Oto CSS dowiemy się z: #nav-utility li:before{content:'\00B7';padding-right:5px;}

content:'\00B7'; odnosi się do kodu ISO dla małego dot charakteru. Ta postać jest następnie umieszczana tuż przed każdym li w # nav-utility.

Answer 4

Zamiast

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

zrobić

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

ten sposób nie trzeba dać ostatni specjalną klasę.