怎麼讓邊框從父容器的底邊的中部出現，讓後變長。

怎麼讓邊框從父容器的底邊的中部出現，讓後變長。

運用的主要的原理：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("出去");
    }
  );