CSS-如何在导航标题之间添加点 [英] CSS - How to add dot between navigation title

问题描述

登录www.linkedIn.com后，右上角的导航栏显示标题，如下所示:

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.

谢谢

推荐答案

以下是他们在LinkedIn上使用的内容:

Here is what they use on LinkedIn:

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

也就是说，他们正在使用CSS在每个列表项之前添加一个额外的字符.'\ 00B7'是Unicode中的中间点. :before 是一个CSS中的伪元素；它使您可以像在元素的内容之前(在本例中，在< li> 元素的内容之前)存在一个元素一样操作，并且可以使用 content属性可将某些内容插入该伪元素.为了适当地隔开它们，他们添加了一些填充.

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.

如果您查看的摘录略大一些，则可能会发现他们使用了hack(以 * 开头的属性，这将导致其他浏览器忽略该属性，但是较旧版本的IE使用该属性好像没有 * 一样会插入背景图片，因此不支持:before 伪元素的旧版浏览器仍会获得提示.

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

这篇关于CSS-如何在导航标题之间添加点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！