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'是Unicode中的中间点.:before是CSS中的伪元素; 它允许您在元素的内容之前(在这种情况下,在<li>元素的内容之前)有一个元素,并且您可以使用该content属性将一些内容插入到该伪元素中.为了正确地分隔它们,他们添加了一些填充.

如果你看一个稍微大一点的摘录,看起来他们使用了一个hack(前缀属性*,这将导致其他浏览器忽略该属性,但旧版本的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;}