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

Question

I have some logic for styling the active link in React and I have CSS for an animated underline on nav links. The problem is that I don't know how to change the color of the underline when the link is active.

In CSS, I think the selector would be .nav-link:after:active

How can I change the color of the underline when the link is 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; 
  }

Answer 1

You can do something like this with the one you've provided.

 .nav-item { position: relative; padding: 15px 0; }.nav-link { display: inline-block; position: relative; text-decoration: none; color: #000; }.nav-link.active { color: blue }.nav-link:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #000; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; }.nav-link:hover:after, .nav-link.active:after { width: 100%; left: 0; background: blue; }

 <div class="nav-item"> <a class="nav-link" href="#">Some Link 1</a> </div> <div class="nav-item"> <a class="nav-link active" href="#">Some Link 2</a> </div>

I'm not sure if you're using react-router or not. But if you are you can do it using NavLink like

<NavLink
   className="link-item"
   activeStyle={{ color: 'blue' }}
   to="/"
>
  Link
</NavLink>

Hope this helps !