[分享]css中导航栏加竖线

CSS中，为导航栏添加竖线是一个常见的需求。当我们在网站上使用导航栏时，通过为菜单项添加一条竖线，可以使页面更加美观和易于导航。下面是一份样式表示例，可以用于为导航栏添加竖线。nav { displa...

CSS中，为导航栏添加竖线是一个常见的需求。当我们在网站上使用导航栏时，通过为菜单项添加一条竖线，可以使页面更加美观和易于导航。下面是一份样式表示例，可以用于为导航栏添加竖线。

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  position: relative;
}

nav ul li a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 1px;
  background-color: #333;
} 

这个样式表中的关键部分是a元素的:after伪类。通过指定右侧为负数偏移量，可以使竖线在菜单项的右侧显示。将a元素的position属性设置为relative，可以使其伪类相对于a元素绝对定位。

在nav元素中，我们还使用了弹性布局（flex）来排版，使导航栏更加美观，并确保菜单项适应不同屏幕大小。nav ul中的list-style:none和margin:0和padding:0是用来去除默认列表样式的。

总的来说，为导航栏添加竖线是一个相对简单的任务。只需要一些CSS代码，就可以使网站的导航栏更加专业化、实用化、美观化。