悬停时，文本从两侧出现

Question

如何使文本像动画一样从侧面出现?我试过用绝对位置设置它，它像我想要的那样工作，但我希望找到更好的方法来做到这一点，所以我在这里。

*{
box-sizing:border-box;
margin:0;
padding:0;
}
.container {
width:20rem;
height:20rem;
background-color:lightgrey;
display:flex;
justify-content:center;
align-items:center;
}
.hover-this{
display:block;
background-color:blue;
color:white;
padding:3rem;
}
.left-text{
position:absolute;
left:1rem;
overflow:hidden;
color:blue;
}
.right-text{
position:absolute;
left:18rem;
color:blue;
bottom:80%;
}
.hover-this:hover{
background-color:white;
color:blue;
transition:background-color 1s, color 1s;
}
.hover-this:hover .right-text{
left:12.5rem;

transition:left, 500ms ease-in-out;
color:blue;
overflow:hidden;
}
.hover-this:hover .left-text{
left:7rem;
transition:right, 500ms ease-in-out;
color:blue;
}

<script src="https://kit.fontawesome.com/9c5c8ca521.js" crossorigin="anonymous"></script>
<div class="container">
<div class="hover-this">
<div class="left-text"><i class="fas fa-chevron-left"></i></div>
hover me
<div class="right-text"><i class="fas fa-chevron-right"></i></div>
</div> 
</div>

我只是想做同样的事情，如果可能的话，不需要使用position absolute

Answer 1

你可以在鼠标悬停时试试

.hover-this:hover{
transform: translateX(7rem);
}

如果你想让它更流畅，你可以用transition

.hover-this:hover{
transform: translateX(7rem);
transition: transform 0.2s ease 0s;
}