我必须创建一个只有图标的列表菜单，当你将鼠标悬停在它上面时，隐藏的文本会从右到左逐渐消失。不幸的是，我对过渡的了解不足以完成这一任务。我目前有过渡，但整个菜单都有
https://codepen.io/onesneakymofo/pen/qBdxyjB
HTML:
<div class="box">
<ul>
<li>
<span class="hide-me">Users</span>
<span class="fas fa-list fa-user fa-2x fa-inverse icon"></span>
</li>
<li>
<span class="hide-me">Email</span>
<span class="fas fa-list fa-envelope fa-2x fa-inverse icon"></span>
</li>
<li>
<span class="hide-me">Settings</span>
<span class="fas fa-list fa-cog fa-2x fa-inverse icon"></span>
</li>
</ul>
</div>
CSS：
.box{
position: relative;
background: tomato;
height: 500px;
width: 500px;
}
ul {
z-index: 1;
position: absolute;
right: 10px;
}
li {
position: relative;
list-style: none;
height: 50px;
width: 50px;
padding: 5px;
right: 25px;
line-height: 0;
margin-bottom: 25px;
top: 5px;
background: #333;
border-radius: 25px;
}
.hide-me{
font-size: 26px;
opacity: 0;
}
li:hover{
top: 0px;
background-color: orange;
transition: width 1s ease-out;
width: 125px;
}
li:hover .hide-me {
opacity: 100;
transition: opacity .35s;
position: absolute;
top: 25px;
}
li:hover .icon {
position: absolute;
right: 5px;
top: 5px;
}
span {
color: #fff;
}
我发现最接近我想要的东西是
https://stackoverflow.com/a/52211712
但当我试图将其放入列表时，我的代码片段中也会发生同样的事情。
谢谢。
您可以使用::after和position:absolute将内容放在菜单后面，然后使用:hover::after将内容从后面移出。相关的CSS位于下面HTML的头部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
li {
background-color: white;
display: inline-block;
}
li::after {
content: "12345";
position: absolute;
left: 50px;
transition: all 1s ease;
z-index: -1;
}
li:hover::after {
left: 200px;
transition: all 1s ease;
}
</style>
</head>
<body>
<ol>
<li>qwertyuiop asdf</li>
<br>
<li>qwertyuiop asdf</li>
<br>
<li>qwertyuiop asdf</li>
<br>
</ol>
</body>
</html>