Javascript CSS/JS中导航菜单中的箭头（例如playframework.org）

网站顶部的导航菜单上有一个小箭头，指向当前选定的部分（主页、学习、下载等）。我试图支持他们所使用的实现，但我不能对此掉以轻心——Chrome的“资源”窗口中没有显示资源，对元素的检查也没有显示任何背景图像或JS拦截器的迹象（尽管我可能没有看到）。那到底是怎么回事？：）

这是HTML：

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

这种技术叫做CSS箭头，你可以在网上找到很多文章和例子

---

（编辑：

@jeroen

发布了一个非常好的版本）。

看起来他们使用了css箭头，请参见。

这里有一个链接，可以查看它的实际应用

---

删除

内容：“.

删除箭头。另外，

边框右侧：0.8em实心透明

是箭头的右侧部分，

边框左侧

是左侧部分。示例参考实现：在相关问题中找到

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

.box{
    background: red;
    color: #FFF;
    width: 100px;
    height: 100px;
    position:relative;
}

.arrow-up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-bottom: 10px solid white;
    position: absolute;
    bottom: 0px;
    margin-left: -10px;
    left:50%;  
}