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

CSS中的导航栏是网站设计中不可缺少的一部分，而其中的竖线效果是许多网站都使用的一种常见样式。这种竖线可以将导航栏中的每个项目分隔开来，从而更加清晰的展示网站的结构和内容。 / 在CSS中创建竖线 ...

CSS中的导航栏是网站设计中不可缺少的一部分，而其中的竖线效果是许多网站都使用的一种常见样式。这种竖线可以将导航栏中的每个项目分隔开来，从而更加清晰的展示网站的结构和内容。

/* 在CSS中创建竖线 */

nav li {
    display: inline-block;
    margin: 0px 20px; /* 这里设置的是导航栏项目之间的间距 */
    position: relative;
}

nav li::after {
    content: "";
    display: block;
    width: 1px;
    height: 20px; /* 这里设置的是竖线的长度 */
    background-color: #444444; /* 这里设置的是竖线的颜色 */
    position: absolute;
    top: 0px;
    right:-10px; /* 这里是将竖线放到导航栏项目的右侧 */
} 

在CSS中实现导航栏竖线的效果其实非常简单，我们只需要在每个导航栏项目的后面添加一个伪元素::after，然后设置其为一个具有宽度、高度和背景色的块级元素。由于我们将这个伪元素设置为绝对定位，所以我们可以将其放置在导航栏项目的右侧。

最后，我们只需要根据设计要求设置竖线的颜色、长度和位置即可。通过在CSS中添加这些简单的样式，你可以轻松地为你的网站创建一个漂亮的导航栏效果。