悬停链接下的CSS三角形(没有UL/LI/SPAN)？

Question

我正在努力做一些非常非常简单的效果.这就是我想要的样子:

当您将鼠标悬停在文本链接上时,我希望在此行下方显示一个小的橙色三角形.我发现的所有响应都使用ul和li来完成这项工作,但这不是我设置代码的方式,也不适用于我正在做的事情.

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

  <div class="row"><div class="large-9 large-centered columns show-for-medium-up rectangle">&nbsp;</div></div>

我正在使用基础4构建此站点.因为我希望我的链接以某种方式设置并且我希望在我的链接下面有这条白线,我不能使用ul/li方法来获得三角形悬停,甚至是真的display: block;我发现的好方法但根本不适用于我.我想如果我在这两个部分下复制这一部分:

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
    </div>
  </nav>

这应该工作.这是我目前拥有的CSS.

.mainnav a {
font-family: "Quicksand", Verdana, sans-serif;
color: #8cc63f;
font-size: 1.75em;
}
.mainnav a:hover {
color: #c97932;
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #c97932;
margin: 25px auto;
display: none;
}
.mainnav a:hover + .arrow {
display: block;
}

显然,该display: block;方法不起作用,因为这些项目不是并排的.请帮忙!我已经不得不放弃我希望这样做的滑动js动画,因为我无法弄清楚...... :(提前谢谢你!

请允许我用这个矩形类来澄清这一行. 这就是全部,但必须在链接和三角形出现的区域之间进行.这就是ul/li方法不起作用的原因.

.rectangle {
    height: 1.5px;
    background-color: #fff;
    position: relative;
    // margin: 1% 0% 3% 0%;
}

为我的问题工作修复!

HTML

  <nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns underline">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

CSS

   .mainnav {
    height: 100px;
  }

  .mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
  }

  .mainnav a:hover {
    color: #c97932;
  }

  .mainnav a, .mainnav a:hover{ text-decoration:none;}
  .mainnav a:hover:after {
    display: block;
    position:relative;
    top:10px;
    width:100%;
    height:0;
    text-align:center;
    content : "\25B2";
    color: @orange;
  }

  .underline {
    margin: 10px 0px; 
    padding: 5px 0px;    
    border-bottom:2px solid #fff;
    overflow:visible;
  }

Answer 1

您可能确实想要使用display:block;,但是,您需要定位元素以使其位于线下方.

.mainnav a:hover + .arrow {
    display: block;
    position: relative; /* you could also try 'absolute' here */
    top: -50px; /* this will be how far down you want the triangle */
}

编辑:

我创建了一个JSFiddle来演示.我不得不添加一些CSS定义,以便其余部分显示如下所述.

对于后代,以下是相关规则:

.mainnav a, .mainnav a:hover{ text-decoration:none;}
.mainnav a:hover:after {
    display: block;
    position:relative;
    width:100%;
    text-align:center;
    content : "\25B2";

    color:yellow;
}

.columns {float : left; margin:10px;}

content : "\25B2";插入unicode▲.当然,这可以用一个background-image: url(...)或任何你需要的东西来代替.

编辑2:

看到这个版本的JSFiddle.而不是把边框放在a(导致一个奇怪的不断扩大的宽度问题),我把它div包裹a和包括和添加边距和填充div,然后给出"箭头"a,height: 0;以便框不会扩展:hover.

这是完整的解决方案:

.mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
}
.mainnav a:hover {
    color: #c97932;
}
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c97932;
    margin: 25px auto;
    display: none;
}
.mainnav a, .mainnav a:hover {
    text-decoration:none;
}
.mainnav a:hover:after {
    display: block;
    position:relative;
    top:5px;
    width:100%;
    height:0;
    text-align:center;
    content :"\25B2";
    color:#c97932;
}
.columns {
    float : left;
    margin:0;
    padding:5px 10px;
    border-bottom:1px solid #f00;
    overflow:visible;
}

<nav class="mainnav">
    <div>
        <div class="columns"><a href="#">Work</a></div>
        <div class="columns"><a href="#">About</a></div>
        <div class="columns"><a href="#">Contact</a></div>
        <div class="columns"><a href="#">Blog</a></div>
    </div>
</nav>