html - CSS跨度位置:absolute not working

Question

我的跨度position:absolute；并且过渡不起作用。我可以在这个部分做什么？

当你点击菜单并点击改变span菜单的位置时就会滑下。但是站在<span></span>的右边并且没有显示任何变化。这是演示页面:JsFiddle
HTML

<div class="tb-tabs org">
    <a class="tab1">Status</a>
    <a class="tab2">Photo</a>
    <a class="tab3">Video</a>
    <a class="tab4">Link</a>
    <span></span>
  </div>

CSS

.tb-tabs span {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;  
  border-bottom: 9px solid #d8dbdf;
  position: absolute;
  transition: transform .0s;
  transform: translate( -220px, 41px);
}

.tb-tabs span:after {
  display: block;
  content: '';
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;  
  border-bottom: 8px solid #f4f4f4;
  position: absolute;
  transform: translate(-7px, 1px); 
}

.tb-tabs a.current {
  color: hsl(0, 0%, 0%);
  transition: all .8s;
}

.tb-tabs.org {
  border-color:#d8dbdf;
}

.tb-tabs.org span {
  border-bottom-color:#d8dbdf;
}

.tb-content > div {
  width: 275px;
  height: 350px;
}

.tb-content > div p {
  padding: 10px;
}

span.arr-tab1 {
  transform: translate( -305px, 41px);  

}

span.arr-tab2 {
  transform: translate( -220px, 41px);  
}

span.arr-tab3 {
  transform: translate( -135px, 41px);  
}

span.arr-tab4 {
  transform: translate( -50px, 41px);  
}

Answer 1

单击您的 css 切换已编译 查看您的 codepen.io 元素 (这意味着眼睛图标。) ，之后的 css 部分将为您提供可用的文档。您只需执行此代码即可将其复制并粘贴到您的style.css 中。文件。现在你的<span></span>工作正常。