本文主要是介绍css 巧用 ::after 和 ::before 实现竖排分类导航，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div class="container"><div class="primary"><divclass="item"v-for="(item, index) in categoryList":key="item.id":class="{ active: index === activeIndex }"@click="activeIndex = index">{{ item.label }}</div></div></div>
</template>
<script>
export default {data() {return {activeIndex: 0,categoryList: [{label: "精选好物",},{label: "炫酷动漫",},{label: "贺岁影院",},],};},
};
</script><style lang="scss" scoped>
.primary {overflow: hidden;width: 180px;flex: none;background-color: #f6f6f6;.item {cursor: pointer;display: flex;justify-content: center;align-items: center;height: 96px;font-size: 26px;color: #595c63;position: relative;&::after {content: "";position: absolute;left: 42px;bottom: 0;width: 96px;border-top: 1px solid #e3e4e7;}}.active {background-color: #fff;&::before {content: "";position: absolute;left: 0;top: 0;width: 8px;height: 100%;background-color: #27ba9b;}}
}// 移除最后一项和高亮项的灰色线条
.primary .item:last-child::after,
.primary .active::after {display: none;
}
.container {margin: 30px;
}
</style>
这篇关于css 巧用 ::after 和 ::before 实现竖排分类导航的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
