效果：
20240919_143100
代码
<template><div class="title"><span>为什么需要横向布局？ 在某些情况下， 您的文档可能包含宽度较大的表格、图表或图片，这些内容在纵向布局下可能会导致页面排版混乱， 难以阅读或印刷。</span></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less">
.title {width: 200px;line-height: 2;span {background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;background-size: 0px 2px;background-position: right bottom;transition: background-size 1s;&:hover {background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;background-size: 100% 2px;background-position: left bottom;}}
}
</style>
