CSS下划线动画

<template>
  <div class="home">
    <h2 class="title">
      <span>
        From the moment I saw you, my heart began to beat in a different rhythm. Your smile is like a ray of sunshine
        that warms my world and makes me forget all my worries. Your presence fills me with joy, and your absence leaves
        me longing for your return.

        You are my dream come true, and I cherish every moment we spend together. Your kindness, compassion, and wit are
        qualities that I admire deeply. You inspire me to be a better person, and I am grateful for the opportunity to
        grow with you.

        I want to be there for you, through the good times and the bad. I want to share your joys and sorrows, and
        support you in all your endeavors. My love for you is unwavering and true, and I hope that you can see the
        sincerity in my heart.

        In conclusion, I want to say that I love you with all my heart. You are my everything, and I cannot imagine my
        life without you. Please, be mine forever and let us embark on this journey of love together.
      </span>
    </h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HomeView',
  components: {
  },
});
</script>
<style lang="scss" scoped>
.title {
  color: #333;
  line-height: 2;
  span{
    background: linear-gradient(to right, #732f2b,#146420) no-repeat right bottom;
    background-size: 0 2px;
    cursor: pointer;
    transition: background-size 1s;
  }
  span:hover{
    background-position: left bottom;
    background-size: 100% 2px;
  }
}
</style>