CSS - How to add dot between navigation title
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
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;}
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/
Instead of
span:after {
content: '*';
}
span.last:after {
content: '';
}
do
span:after {
content: '*';
}
span:last-child:after {
content: '';
}
This way you don't have to give the last one a special class.
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.
I think this is the shortest way without extra classes:
span:not(:last-of-type)::after {
content: '\00B7';
}
精彩评论