CSS 导航栏底线向两边延伸动画

利用元素向左移动的同时，宽度变长，实现两边延伸效果。

react代码：

      <ul className="tab">
            {
              moduleList.map((item: any, index: number) => {
                return (<li key={item.mkId} data-index={index} className={isSelect === index ? 'active' : ''}
                            onClick={(e) => handleLiClick(e, item)}>
                  <span>{item.mkMc}</span>
                </li>)
              })
            }
            <li className={isSelect === -1 ? 'active' : ''} onClick={handleEditLiClick}>
              <img src={getImgUrl('edit.svg')} alt="编辑我的功能模块" width={20} style={{ marginRight: 20 }}/>
              <span>编辑</span>
            </li>
          </ul>

CSS样式：

.tab {
  width: 100%;
  display: flex;
  list-style: none;
  height: 100%;
  margin-bottom: 0;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

.tab li {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tab li span {
  font-size: 18px;
  font-weight: 600;
}

.tab li:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 3px;
  background: #0a5fad;
  transition: all 0.3s ease-out;
}

.tab li.active:after {
  left: 0;
  transition: all 0.3s ease-out;
  width: 100%;
}

.listItem li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.listItem li:hover {
  color: #2966c1;
  transition: all 0.3s ease-out;
  background-color: #f1f4f9;
}

.listItem li.active {
  color: #2966c1;
  transition: all 0.3s ease-out;
  background-color: #f1f4f9;
}

标签：动画,底线,0.3,transition,li,tab,ease,CSS,out
来源： https://www.cnblogs.com/suanyunyan/p/16504664.html