CSS - 如何在导航标题之间添加点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3570480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - How to add dot between navigation title
提问by q0987
After I login www.linkedIn.com, the navigation bar on top right displays the title as follows:
登录www.linkedIn.com后，右上角导航栏显示如下标题：
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
谢谢
回答by Brian Campbell
Here is what they use on LinkedIn:
以下是他们在 LinkedIn 上使用的内容：
#nav-utility li:before{content:'#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:'<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span class="last">Item 4</span>
B7';padding-right:5px;}
B7';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. :beforeis 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 contentproperty to insert some content into that pseudo element. In order to space it properly, they add some padding.
也就是说，他们使用 CSS 在每个列表项之前添加一个额外的字符。'\00B7'是 Unicode 中的中间点。:before是 CSS 中的伪元素；它使您可以像在元素内容之前（在这种情况下，在元素内容之前）有一个元素一样<li>，并且您可以使用该content属性将一些内容插入到该伪元素中。为了适当地间隔它，他们添加了一些填充。
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 :beforepseudo-element will still get the bullet.
如果你看一个稍微大一点的摘录，他们似乎使用了一个 hack（在一个属性前加上*，这将导致其他浏览器忽略该属性，但旧版本的 IE 使用该属性，就好像*不存在一样）将插入背景图像，因此不支持:before伪元素的旧浏览器仍将获得子弹。
span:after {
content: '*';
}
span.last:after {
content: '';
}
回答by davehauser
You can use the :after pseudo-selector:
您可以使用 :after 伪选择器：
HTML:
HTML：
span:after {
content: '*';
}
span.last:after {
content: '';
}
CSS:
CSS：
span:after {
content: '*';
}
span:last-child:after {
content: '';
}
? You can try it here: http://jsfiddle.net/4EAwR/
? 你可以在这里试试：http: //jsfiddle.net/4EAwR/
回答by zackify
Instead of
代替
##代码##do
做
##代码##This way you don't have to give the last one a special class.
这样你就不必给最后一个特殊的类。
回答by Dominic Barnes
Here is the relevent CSS: #nav-utility li:before{content:'\00B7';padding-right:5px;}
这是相关的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.
该content:'\00B7';指一小点字符的ISO代码。然后将该字符放置在 #nav-utility 中的每个 li 之前。
