导航栏中的分隔符实现方法

在一个网页上，尤其是导航栏文字与文字之间，大多数情况下都会有分隔符，也就是文字之间的一个小竖线，这个小小的分隔符，每个网站都有不同的样式，常用的写法就是用标签的边框，这个写法也比较简单，用起来也方便，但是，却满足不了越来越绚丽的网页，很多情况下用标签的边框是写不出来现有要的样式的，那就需要其他的写法，下面总结一些常见的，如有不足或者错误之处，欢迎大家批评指正。

1、标签边框.

这个写法比较简单，不需要额外增加HTML页面的结构，给标签一个左边框或者右边框，用css修饰一下即可。

2、|

这种写法就需要额外增加HTML页面结构了，也就是需要添加额外的标签，当然，这个标签不仅限于span，p、i…标签都行，在标签里面写上一个键盘上就有的竖线即可，然后用css修饰一下，这种写法适合一些分隔符较小，而且简单的地方。

3、伪元素

很多时候，上面的两种方式并不能满足要求，不管是大小还是位置，都不能随意控制，即使能写出来，也会比较麻烦，这时候，就需要伪元素了。用伪元素的好处就是可以通过css控制位置，大小，样式等，而且代码写起来也简单。

代码示例：

<style>
  a + a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid grey;
  }
</style>

<a href="">登陆</a><a href="">注册</a>

效果：

4、背景图片

有一些比较华丽的网站，分隔符也是做得很漂亮，各种好看的样子，纯css很多时候就写不出来，而且各个浏览器不同，加载出来的样式也会有些差异，这个时候就需要图片了，将UI设计的图片添加为标签的背景样式，正常格式的图片（如：jpg，png，gif等）在各个浏览器上都是没有兼容问题的，网速好的话，都能加载出一样的样式。

5、代码

在阿里巴巴矢量图标库等网站上有很多小图标的代码，自己想要什么样子的，就去上边下载人家写好的，当然了，一些大神也可以自己写，这些都是没问题的。

补充：
a + a:before
表示：每两个a的组合，第二个a之前加上分隔符
简而言之：除了第一个a 其他a的前面都加上分隔符

参考：
CSS世界
CSS-网站导航栏标题之间的分隔符