Add triangle under current active page link/make current page highlighted while on it

Question

i'm currently editing a new layout for my tumblr and i was wondering if there was a way to add a small triangle sort of like this:

http://i.imgur.com/e0wP0Qd.png

to a current link, by current a mean, every page that is clicked/a person is currently on it would have a triangle under its link.

i have a menu bar that'll have all the links (can be seen here: http://mains-tester.tumblr.com/ ) and i'm trying to do two things, make it so that current page is highlighted on the menu bar and it has a small triangle under it. I'm trying to figure out is theres a way to just add the triangle to every link without having to go and do each and every single one of them.

Answer 1

It is quite easy to add this sort of effect using the pseudo-class :after .

Ensuring that position: relative for the <a> tag, you can add this CSS which will add a white arrow at the bottom centred.

.linkage:hover:after {
  width: 0;
  height: 0;
  position: absolute;
  content:"";
  display:block;
  /* Ads an arrow effect exploiting the way that browsers join borders together */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  /* centers relative to parent */
  left: 50%;
  /* Compensates for width of border (arrow) */
  margin-left: -8px;
}

I've set up a demo of it working here (with most of the same css you have used): http://jsfiddle.net/QybKW/4/

If you would prefer not to rely on CSS trickery, you could create a PNG image file and set the background of the pseudo element giving it a positive width and height.