html - CSS 箭头不透明度过渡

Question

当您将鼠标悬停在每个项目上时，如何使用我拥有的 CSS 箭头（见下文）并使它们淡入淡出？

我的 CSS：

#menu li {
  position:relative;
}

#menu li a:after {
  content: " .";
  display: block;
  text-indent: -99em;
  border-bottom: 0.6em solid #1c525a;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: none;
  height: 0px;
  margin-left: -.6em;
  margin-right: auto;
  margin-top: -7px;
  position: absolute;
  left: 50%;
  width: 1px;
}

所有代码都在 jsFiddle中可用。

Answer 1

为此，我添加了以下内容：

#menu li a:after {
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#menu li:hover a:after {
  border-bottom: 0.6em solid #1c525a;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

请参阅 jsFiddle - 我确信这段代码可以被清理或击败，但我还没有在 Stack Overflow 上找到这个示例/答案，所以我想我会添加这个。