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;
}

所有代码都可用in a 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;
}

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