怎么让边框从父容器的底边的中部出现，让后变长。

怎么让边框从父容器的底边的中部出现，让后变长。

运用的主要的原理：position定位（包括水平居中），用定位实质上想让子元素的中心点和父元素的中心点重合，还要控制住子元素的width的变化，还有就是：hover效果。

HTML部分：

 <ul  class="container">
        <li>
          国际
          <span></span>
        </li>
        <li>
          国内新
          <span></span>
        </li>
        <li>
          边新边新闻内新
          <span></span>
        </li>
   </ul>

CSS部分：

  .container{
        width: 100%;
        height: 26px;
        display: flex;
        flex-direction: row;
        list-style: none;
      }
      .container li{
        margin:0 15px;
        position: relative;
      }
      span{
        display: block;
        width: 0%;
        height: 2px;
        background-color: orange;
        position:absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%,0%);
        transition: width .45s;
      }
      .container li:hover span{
        width: 100%;
      }

我又想了一招，用JQuery中的hover方法来控制盒子的宽变化从0%到100%.

  $(".container>li").hover(
    function () {
     　$(this).find('span').stop().animate({
      width: "100%",
      }, 400 );
      // console.log("进入父元素");
    },
    function () {
    　$(this).find('span').stop().animate({
      width: "0%",
      }, 400 );
      // console.log("出去");
    }
  );