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

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代码。然后将该字符放在＃nav-utility中的每个li之前。

CSS - 如何在导航标题之间添加点

4 个答案: