CSS-transitions font-size 不起作用

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>

CSS-transitions font-size 不起作用

CSS-transitions font-size does not work

css

font-size

css-transitions