导航样式设置：如何修改导航项目下方线条的颜色？

嘿，这个问题我碰到过好多次了，其实核心就是找到控制那条下划线的CSS属性，然后修改颜色就行。我给你分几种常见场景来说明，你可以对着自己的项目来调整：

首先得搞清楚导航项的下划线是怎么实现的，常见的有两种方式：

方式一：用border-bottom实现 #

很多简单的导航会直接用底部边框来当下划线，这种情况直接修改选中/hover状态下的border-color就行：

/* 选中状态的导航项 */
.nav-item.active {
  /* 把#ff4500换成你想要的颜色值，比如十六进制、RGB、颜色名都可以 */
  border-bottom: 2px solid #ff4500;
}

/* 如果是鼠标 hover 时显示下划线并改颜色 */
.nav-item:hover {
  border-bottom: 2px solid #2196f3;
}

方式二：用伪元素::after绘制下划线 #

为了实现更灵活的样式（比如下划线宽度不是100%、有动画效果），很多项目会用伪元素来做下划线。这种情况就修改伪元素的背景色或者边框色：

.nav-item {
  position: relative; /* 伪元素需要基于父元素定位 */
  /* 其他基础样式：padding、字体大小等 */
}

/* 选中状态的下划线 */
.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%; /* 让下划线左右留空，不是满宽 */
  width: 80%;
  height: 2px;
  /* 修改这里的颜色即可 */
  background-color: #4caf50;
  /* 如果是用border实现伪元素下划线，就改border-color */
  /* border-top: 2px solid #4caf50; */
}

如果是用框架开发，思路和原生CSS一致，只是样式的写法略有不同：

React + Styled Components 示例 #

import styled from 'styled-components';

const NavItem = styled.div`
  position: relative;
  padding: 0.5rem 1rem;
  cursor: pointer;

  /* 选中状态的下划线 */
  &.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    /* 可以通过props动态传颜色 */
    background-color: ${props => props.activeColor || '#ff4500'};
  }
`;

// 使用组件时
function Navigation() {
  return (
    <div className="nav-container">
      <NavItem className="active" activeColor="#2196f3">首页</NavItem>
      <NavItem>分类</NavItem>
    </div>
  );
}

Vue + Scoped 样式示例 #

<template>
  <div class="nav-container">
    <div :class="['nav-item', { active: currentTab === 'home' }]" @click="currentTab = 'home'">
      首页
    </div>
    <div :class="['nav-item', { active: currentTab === 'category' }]" @click="currentTab = 'category'">
      分类
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  }
}
</script>

<style scoped>
.nav-item {
  position: relative;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #2196f3;
}
</style>

如果用Tailwind这种原子化CSS框架，直接用类名就能快速修改：

<!-- 选中状态下的下划线 -->
<a href="#" class="border-b-2 border-orange-500 px-4 py-2">首页</a>

<!-- 鼠标hover时切换下划线颜色 -->
<a href="#" class="border-b-2 border-gray-300 hover:border-blue-500 px-4 py-2">分类</a>

<!-- 自定义宽度的下划线（用伪元素实现） -->
<a href="#" class="relative px-4 py-2 after:absolute after:bottom-0 after:left-1/4 after:w-1/2 after:h-1 after:bg-green-500">我的</a>

小技巧：找不到对应样式？ #

如果不确定下划线是哪个CSS属性控制的，打开浏览器开发者工具（按F12），选中导航项，在Elements面板里查看对应的CSS规则，找到border-bottom或者伪元素的background-color/border-color，直接在工具里修改测试，没问题再写到项目代码里就行。

内容的提问来源于stack exchange，提问作者climivin