一行 css 实现竖直间隔线

效果图

html

<div class="container">
  <a href="#">收藏</a>
  <a href="#">评论</a>
  <a href="#">点赞</a>
  <a href="#">分享</a>
</div>

css

.container {
  display: flex;
  font-size: 14px;
}
a {
  text-decoration: none;
  padding: 0px 20px;
  color: grey;
}
a+a {
  border-left: 1px solid lightgrey; /*一行 css 实现竖直间隔线*/
}

扫盲：关于 css 的 + 选择符

+ 的作用： 获取某元素同级的下一个紧跟着的兄弟元素

div + p {  
   color: green;  
} 

• 由于第一个 div 无兄弟元素 p，无任何匹配。
• 第二个 div 同级有兄弟元素 <p>second</p>，符合匹配条件
• <p>Third</p>非紧跟任何 div的后面，故不匹配。

参考链接

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector