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

前言

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

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

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

 

 

步骤

原理:伪元素“: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”表示选择类名的第一个伪元素,使它不显示,即第一个友链的前面不加分隔符。

 

© 版权声明
THE END
点赞0
评论 抢沙发

请登录后发表评论

    暂无评论内容