[分享]css中字与字之间的竖线

CSS中的字与字之间的竖线，通常在设计导航栏或菜单时会用到。例如，在横向的导航栏中，我们想要让导航项之间有一个竖线来区分它们。那么应该如何实现呢？.nav { display: flex; } .na...

CSS中的字与字之间的竖线，通常在设计导航栏或菜单时会用到。例如，在横向的导航栏中，我们想要让导航项之间有一个竖线来区分它们。那么应该如何实现呢？

.nav {
  display: flex;
}

.nav li {
  margin-right: 20px;
  position: relative;
}

.nav li::after {
  content: "";
  height: 20px;
  width: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
} 

代码解释：

• 将导航栏设置为flex布局
• 为每个导航项设置margin-right，即留出竖线的空隙
• 为每个导航项的::after添加内容，即竖线，在导航项的最右侧
• 为竖线设置高度、宽度和颜色，并使其在导航项的中间垂直居中
• 因为::after的位置默认是相对于导航项的左侧，所以使用position: relative;和right: -10px;将其移动到导航项的最右侧
• 使用transform: translateY(-50%);将竖线在垂直方向上居中

总结：

通过为导航项添加::after伪元素，并设置其样式属性，我们可以在字与字之间添加竖线，实现导航栏的设计效果。