css实现鼠标经过（hover）段落或文章下划线动画

先看行内标签实现效果（预期效果）

再看块级标签实现效果

ps：至于为什么会出现这样的效果，建议去学习行内标签和块级标签的区别（个人简单理解为，行内标签根据内容的多少进行层层包裹，块级标签只是在内容最外层嵌套了一个大盒子，这也是造成上面两者情况的区别）

话不多说，直接上代码，简单得让你颠覆想象

1、html代码（准备一个行内和一个块级）

  <span class="item">
    If someone jailbreaks a smartphone, tablet ( computer) or other device, they use a special piece of software in
    order to
    remove the restrictions imposed by the manufacturer on the kind of applications that can be downloaded and run on
    the
    device.
  </span>
  <div class="item">
    If someone jailbreaks a smartphone, tablet ( computer) or other device, they use a special piece of software in
    order to
    remove the restrictions imposed by the manufacturer on the kind of applications that can be downloaded and run on
    the
    device.
  </div>

2、css完成代码

    .item {
      /* background-color: aqua; */
      line-height: 30px;
      background: linear-gradient(to right, red, skyblue) no-repeat right bottom;
      background-size: 0 3px;
      transition: background-size .5s;
      line-height: 40px;
    }

    .item:hover {
      background-size: 100% 3px;
      background-position: left bottom;
      cursor: pointer;
    }