Css 如何更改活动链接上的下划线颜色-反应

我有一些在React中设置活动链接样式的逻辑，我有在导航链接上设置动画下划线的CSS。问题是，当链接处于活动状态时，我不知道如何更改下划线的颜色

在CSS中，我认为选择器应该是

.nav-link:after:active

链接处于活动状态时，如何更改下划线的颜色

const isActive = (history, path) => {
  if (history.location.pathname === path) {
    return { color: "#ff7315" };
  } else {
    return { color: "#232020" };
  }
};

styles.css

  .nav-item { 
    display: table-cell; 
    position: relative; 
    padding: 15px 0;
  }
  .nav-link {
    display: inline-block;
    position: relative;
  }
  .nav-link:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #3a3535;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }

  .nav-link:hover:after { 
    width: 100%; 
    left: 0; 
  }

---

你可以用你提供的这个做类似的事情

.nav项{
位置：相对位置；
填充：15px0；
}
.导航链路{
显示：内联块；
位置：相对位置；
文字装饰：无；
颜色：#000；
}
.nav-link.active{
颜色：蓝色
}
.导航链接：之后{
背景：无重复滚动0 0透明；
底部：0；
内容：“；
显示：块；
高度：2倍；
左：50%；
位置：绝对位置；
背景：#000；
过渡：宽度0.3s，左0.3s；
宽度：0；
}
.导航链接：悬停：之后，
.导航链接。激活：在{
宽度：100%；
左：0；
背景：蓝色；
}

---

您可以使用您提供的软件执行类似操作

.nav项{
位置：相对位置；
填充：15px0；
}
.导航链路{
显示：内联块；
位置：相对位置；
文字装饰：无；
颜色：#000；
}
.nav-link.active{
颜色：蓝色
}
.导航链接：之后{
背景：无重复滚动0 0透明；
底部：0；
内容：“；
显示：块；
高度：2倍；
左：50%；
位置：绝对位置；
背景：#000；
过渡：宽度0.3s，左0.3s；
宽度：0；
}
.导航链接：悬停：之后，
.导航链接。激活：在{
宽度：100%；
左：0；
背景：蓝色；
}