<body>
    <a>A 标签 未换行 Lorem ipsum dolor</a>
    <br />
    <a>
      A 标签 换行 Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum quaerat molestias odit modi. Suscipit
      ad hic dolorum unde optio, sequi laboriosam consequuntur dicta obcaecati, repudiandae, nam esse debitis possimus
      nesciunt?
    </a>
    <p>P 标签 未换行Lorem ipsum dolor</p>
    <p>
      P 标签 换行Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum quaerat molestias odit modi. Suscipit
      ad hic dolorum unde optio, sequi laboriosam consequuntur dicta obcaecati, repudiandae, nam esse debitis possimus
      nesciunt?
    </p>
    <span>SPAN 标签 未换行Lorem ipsum dolor</span>
    <br />
    <span>
      SPAN 标签 换行Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum quaerat molestias odit modi.
      Suscipit ad hic dolorum unde optio, sequi laboriosam consequuntur dicta obcaecati, repudiandae, nam esse debitis
      possimus nesciunt?
    </span>
  </body>
      a,
      p,
      span {
        line-height: 20px;
        position: relative;
        
      }
      a::before,
      p::before,
      span::before {
        position: absolute;
        content: '';
        dispaly:inline-block;
        border-bottom: 2px solid black;
        bottom: 0;
        width: 0%;
        transition: all 0.8s ease;
      }

      a:hover::before,
      p:hover::before,
      span:hover::before {
        width: 98%;
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.