CSS - How to add dot between navigation title

Question

Hello all,

After I login www.linkedIn.com, the navigation bar on top right displays the title as follows:

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

I would like to know how they add * between different titles. I have used firebug but I didn't see where they add such a small * between titles.

Thank you

Answer 1

You can use the :after 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: '';
}

​ You can try it here: http://jsfiddle.net/4EAwR/

Answer 2

Here is what they use on LinkedIn:

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

That is, they are using CSS to add an extra character before each list item. '\00B7' is a middle dot in Unicode. :before is a pseudo-element in CSS; it allows you to act as if there were an element before the content of an element (in this case, before the content of the <li> element), and you can use the content property to insert some content into that pseudo element. In order to space it properly, they add some padding.

If you look at a slightly larger excerpt, it appears they use a hack (prefixing a property with *, which will cause other browsers to ignore the property but older versions of IE to use that property as if the * weren't there) that will insert a background image, so older browsers that don't support the :before pseudo-element will still get the bullet.

#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 3

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

The content:'\00B7'; refers to the ISO code for a little dot character. That character is then placed just before each li within #nav-utility.