怎样实现在网站的友情链接之间添加分隔符“|”

前言

随着网站的完善，我们可以建立一些友链，来促进互相学习。同时，也可以向访客展示一些优秀的网站，利于宣传优秀的博客。

但是，默认的友链之间，没有任何的分隔符号，大多只是一个空格或者逗号，看起来十分的不美观（特别是友链特别多的情况下）。

所以，我想在各个友链之间添加竖线“ | ”，以区分不同的链接，同时，要求在添加友链后，系统自动生成“分隔符”。（如下图）

步骤

原理：伪元素“:before”或者“:after”

本文使用“:before”伪元素为例，将下面的CSS代码放入网站的“style.css”中，即可轻松实现。

/* 友情链接分隔符的实现 */
.friend-links-item:before {
   content: " | ";
   color: black;
}
.friend-links-item:first-child:before{
   display:none;
}

★说明：

1. 代码“.friend-links-item”是这群友情链接的类名，不同WP主题的类名有所不同，请灵活变通。
2. 代码“.friend-links-item:first-child:before”表示选择类名的第一个伪元素，使它不显示，即第一个友链的前面不加分隔符。