首页 >
css中的导航分割线 |css px转换rem
CSS中的导航分割线是非常常用的一种样式，可以在导航菜单的栏目中添加分割线，增强导航可读性。本文将简单介绍如何使用CSS来实现导航分割线。
首先，在HTML文件中定义导航菜单的结构，例如：
“`HTML“`
接下来，在CSS中定义导航菜单的样式，并增加分割线：
“`CSS
nav {
background-color: #333;
padding: 10px;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
color: #fff;
padding: 5px 10px;
}
/* 增加分割线样式 */
li:not(:last-child) {
margin-right: 10px;
position: relative;
}
li:not(:last-child)::after {
content: “”;
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-right: 1px solid #fff;
}
“`
代码中使用了伪类`:not(:last-child)`来选取除了最后一个li元素之外的所有li元素，然后使用`::after`伪元素添加一个右边框，并使用绝对定位将其定位在li元素的右侧。因为伪元素是li元素的子元素，所以可以使用`transform: translateY(-50%)`将其垂直居中。
以上就是实现导航分割线的CSS代码示例。可以根据实际情况调整分割线的粗细、颜色等样式，使其更加符合网站的风格。