html - Image Displaying Only When Text is Active -

html - Image Displaying Only When Text is Active -

i'm making re-create of msn.com webpage practice html , css. i've managed header, , above except search form. know how create forms, don't understand how 1 of little pieces works

for example:

look @ follow picture: http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

you can see says msn (orange part), arrow/triangle located right underneath it. assume arrow image, correct? can't create through css?

so want know how go having arrow default @ first word, , relocates active link/text.

please allow me know. thanks

a simple gray arrow msn using can made using css. create follow selected link, need utilize javascript. don't worry, it's simple.

first, here's live illustration on jsfiddle: http://jsfiddle.net/ebhvu/23/

html:

<a href="#" class="active">web</a> <a href="#">msn</a> <a href="#">images</a>

css:

this build little gray arrow , place under selected link

a { position:relative; } a:active:after, a.active:after { position:absolute; right:50%; /* centers arrow */ top:100%; /* places arrow below link */ content:" "; width: 0; height: 0; border-left: 5px solid transparent; /* builds arrow */ border-right: 5px solid transparent; border-bottom: 5px solid grey; }

javascript:

every time link clicked javascript give clicked link class of "active"

$('a').on('click',function(){ $('a').removeclass('active'); $(this).addclass('active'); });

html css forms image