效果图

html结构

<a class="linkTransform">
   <span aria-hidden="true" data-content="This is a Link">
   </span>
   This is a Link
</a>

主要思想

1. 创建一个a元素，其中文本为我们的链接文本，span元素中的data-content属性同链接文本相同，该a元素为相对定位
2. 将span元素绝对定位，放置于a元素的左上角，并将往左移100%，并创建一个span::before伪元素，通过attr函数获取data-content的属性值，将span::before向右移动100%，现在span::before伪元素的文本覆盖a元素的文本。
3. 将span元素右移的同时，将span::before向左移动，就能够实现似乎在左侧逐步填满文字的效果。

图文解析

最近又复习回css动画，看回该文章的时候发现文字比较难理解，现提供图文方式

如上图，就是我们希望的文本放置位置，其中 1，红色位置为span元素位置 2，灰色位置为span::before位置，其文本与a元素的文本重合 3，当我们将span元素向左移动的同时，将span::before向右移动，就可以让span::before的位置似乎没变 4，为span和span::before transform加上速度相同的动画，就可以做到从左侧逐步填充文字效果

主要知识点

1. css transition
2. css transform translate
3. css attr函数

css代码

<style>
    .linkTransform{
      color:royalblue ;
      position: relative;
      font-size: 2em;
      font-weight: 800;
      display: inline-block;
      text-decoration: underline;
      word-break: break-word;
      cursor: pointer;
    }
     .linkTransform span{
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      transform: translateX(-100%);
      transition: transform 1s;
    }
   .linkTransform:hover span{
      transform: translateX(0);
    } 
   .linkTransform span::before{
      display: inline-block;
      color: midnightblue;
      text-decoration: underline;
      content: attr(data-content);
      transform: translateX(100%);
      transition: transform 1s;
      text-decoration: underline;
    }
    a:hover span::before {
      transform: translateX(0);
    } 
  </style>