Question

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

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

我试图让这两支箭头正常工作。我向右移动了。我尝试使用转换和字体大小从0px到10px的箭头。有任何想法吗？如果可能的话，我想坚持使用CSS。

干杯

Answer 1

您可以使用font-size隐藏并显示要添加该转换的0px to 10px标记，而不是使用margin-left来增加字体大小span，如下所示，

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>

CSS-transitions字体大小不起作用

1 个答案: