CSS/JS中导航菜单中的箭头(例如playframework.org)

Question

位于http://www.playframework.org网站顶部的导航菜单中有一个向上指向当前所选部分的小箭头(主页,学习,下载,...).我试图落后他们使用的实现,但我无法解决它 - 资源没有显示在Chrome的资源窗口中,并且对元素的检查没有显示任何背景图像的迹象,也没有JS拦截器(虽然我可能错过了).什么是hellhound的名字在那里？:)

Answer 1

这是HTML:

<ul id="menu"> 
<li class="selected"> 
<a href="/">Home</a><span>&gt;</span> 
</li> 
...

魔术发生在这块CSS中:

#menu .selected a:after {
    content: " .";
    display: block;
    text-indent: -99em;
    border-bottom: 0.8em solid #8adc92;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
    border-top: none;
    height: 0px;
    margin-left: -.8em;
    margin-right: auto;
    margin-top: 14px;
    position: absolute;
    left: 50%;
    width: 1px;
}

该技术称为CSS箭头,你可以在网上找到很多文章和例子

(编辑: @jeroen发布了一个非常好的).