Question

The navigation menu at the top of the http://www.playframework.org site features a small arrow pointing upward for the currently selected section (Home, Learn, Download,…). I tried to get behind the implementation they used, but I can’t wrap my head around it – the resource does not show up in Chrome’s Resources window, and an inspection of the elements did not show any signs of a background image, nor a JS interceptor (although I might have missed that). What in hellhound’s name is going on there? 🙂

Answer 1

This is the HTML:

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

And the magic happens in this piece of 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;
}

The technique is called CSS arrows, you can find a lot of articles and examples on the net

(EDIT: @jeroen posted a very good one).