如何为React NavLink激活状态的文本添加下方圆点指示器替代下划线

实现方案 #

无需修改现有React组件代码，仅调整CSS样式即可实现激活导航下方的小圆点效果：

1. 给已有的激活类.ceva新增相对定位属性，同时用::after伪元素绘制小圆点，添加以下CSS代码即可：

.ceva {
  color: #33c9d3;
  /* 新增相对定位 */
  position: relative;
}

/* 激活状态下的底部小圆点 */
.ceva::after {
  content: "";
  position: absolute;
  /* 调整数值可修改圆点和文字的垂直间距 */
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  /* 调整宽高可修改圆点大小 */
  width: 6px;
  height: 6px;
  background-color: #33c9d3;
  border-radius: 50%;
}

2. 可选优化：当前HTML结构中ul的直接子元素是NavLink，不符合语义规范，可调整为li包裹NavLink，功能不受影响，代码更规范：

<ul className="pages">
  <li className="row">
    <NavLink exact to="/" activeClassName="ceva" className="text">Home</NavLink>
  </li>
  <li className="row">
    <NavLink to="/Bim" activeClassName="ceva" className="text">Bim 2021</NavLink>
  </li>
  <li className="row">
    <NavLink to="/Regulations" activeClassName="ceva" className="text">Regulations</NavLink>
  </li>
  <li className="row">
    <NavLink to="/History" activeClassName="ceva" className="text">History</NavLink>
  </li>
</ul>

如果调整了上述结构，只需要把相对定位和伪元素的样式绑定到对应激活类上即可。

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