CSS - Как добавить точку между заголовком навигации

Question

После того, как я войду в www.linkedIn.com, на панели навигации в верхнем правом углу появится заголовок следующим образом:

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

Я хотел бы знать, как они добавляют * между разными заголовками.Я использовал Firebug, но я не видел, где они добавляют такой маленький * между названиями.

Спасибо

Answer 1

Вот что они используют в LinkedIn:

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

То есть они используют CSS для добавления дополнительного символа перед каждым элементом списка. '\00B7' - это средняя точка в Юникоде. :before - псевдоэлемент в CSS; он позволяет вам действовать так, как если бы элемент находился до содержимого элемента (в данном случае до содержимого элемента <li>), и вы можете использовать свойство content для вставки некоторого содержимого в этот псевдоэлемент , Для правильного размещения они добавляют отступы.

Если вы посмотрите на немного большую выдержку, похоже, что они используют хак (префикс свойства с *, что заставит другие браузеры игнорировать свойство, но более старые версии IE будут использовать это свойство, как если бы * не было), который вставит фоновое изображение, поэтому старые браузеры, которые не поддерживают псевдоэлемент :before, все равно получат маркер.

#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

Вы можете использовать псевдоселектор: after:

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

Вы можете попробовать это здесь: http://jsfiddle.net/4EAwR/

Answer 3

Вместо

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

do

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

Таким образом, вам не нужно давать последнему специальный класс.

Answer 4

Вот соответствующий CSS: #nav-utility li:before{content:'\00B7';padding-right:5px;}

content:'\00B7'; относится к коду ISO для маленькой точки. Затем этот символ помещается перед каждым li внутри # nav-utility.