CSS 过渡字体大小不起作用

Question

只是想模仿一个效果，你可以在这里找到：（https://www.gaastrastore.com/en-de/men）：

（顶部菜单，将鼠标悬停在列表项上，条目向右移动并在前面看到两个箭头）

我正在尝试让这两个箭头工作。我得到了正确的工作。我试图使用从 0px 到 10px 的过渡和字体大小开始的箭头。有什么想法吗？如果可能的话，我想坚持使用 CSS。

干杯

Answer 1

您可以使用margin-left隐藏和显示要添加过渡span标签，而不是使用 font-size 从字体大小0px to 10px增加，如下所示：

ul {
  padding: 0;
  margin: 40px;
  overflow: hidden;
}
ul > li {
  list-style-type: none;
}
ul > li > span {
  margin-left: -10px;
  transition: 0.5s ease;
}
ul > li:hover > span {
  margin-left: 0px;
}

<ul>
  <li><span>></span> Home</li>
  <li><span>></span> About</li>
  <li><span>></span> Contact</li>
</ul>