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%); }
代码解释:
总结:
通过为导航项添加::after伪元素,并设置其样式属性,我们可以在字与字之间添加竖线,实现导航栏的设计效果。
粉丝
0
关注
0
收藏
0