1. <p class="hover-p">Hover this text to see the effect!</p>
    1. .hover-p {
    2.   display: inline-block;
    3.   position: relative;
    4.   color: #0087ca;
    5. }
    6. .hover-p::after {
    7.   content: '';
    8.   position: absolute;
    9.   width: 100%;
    10.   transform: scaleX(0);   //一开始隐藏
    11.   height: 2px;
    12.   bottom: 0;
    13.   left: 0;  
    14.   background-color: #0087ca;
    15.   transform-origin: bottom right;  //右边消失
    16.   transition: transform 0.25s ease-out;
    17. }
    18. .hover-p:hover::after {
    19.   transform: scaleX(1);
    20.   transform-origin: bottom left;   //移入的时候从左边入
    21. }