css导i航栏件的竖线

CSS导航栏是网页开发中常见的组件，其中包括竖线分隔符，使得导航栏更加美观和易于识别。下面就来介绍如何使用CSS添加竖线分隔符。

.nav {
  display: flex;
}

.nav__link {
  position: relative;
}

.nav__link::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: #ccc;
  left: -10px;
  top: 0;
}

首先，在导航栏的CSS类中添加display:flex;，使得所有导航链接呈现为一行。然后，给每个导航链接添加position:relative;，为分隔符添加绝对定位。

使用伪元素::before添加竖线，设置其宽度为1像素，高度为100%，颜色为 #ccc。设置left为-10px，使分隔符细长一点，而不是与文本紧贴在一起。这样就完成了竖线分隔符的添加。