关于css:React实现导航栏下划线跟随效果

效果图：

App.jsx

import React, {Component} from 'react'
import style from './index.module.less'
export default class App extends Component {state = { width: 0, left: 0}

  enter = (event) => {const {clientWidth, offsetLeft} = event.target
    this.setState({ 
      width: clientWidth,
      left: offsetLeft
    })
  }

  leave = () => {this.setState(() =>({width: 0}) )
  }
  render () {const { width, left} = this.state
    return (
      <>
        <div className={style.header}>
          <ul ref="ul" onMouseLeave={this.leave} >
            <li onMouseEnter={this.enter}> 首页 </li>
            <li onMouseEnter={this.enter}> 导航一 </li>
            <li onMouseEnter={this.enter}> 导航二 </li>
            <li onMouseEnter={this.enter}> 导航三 </li>
            <li onMouseEnter={this.enter}> 导航四 </li>
          </ul>
          <div className={style.line} style={{width: width, left: left, height: '2px'}}></div>
        </div>
      </>
    )
  }
}

App.module.less

.header {
  position: relative;
  padding-left: 50px;
  ul {
    display: flex;
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      padding: 10px;
      cursor: pointer;
      font-weight: 500;
      &:hover{color: orangered}
    }
  }
  .line {
    position: absolute;
    bottom: 0;
    transition: .3s cubic-bezier(.4,0,.2,1);
    background-color: #c7000b;
  }
}