Adding small arrow under current page in WordPress with CSS - html

Question

I have a menu that has one gradient type for default state, and one for the hover/active state. The current page is just like the hover/active state, but with an arrow under it. I can't figure out the best way to get that arrow to show up. I tried a border image, but that didn't look right since the button size is different depending on the length of the menu item. Here is the current CSS I am using to create the two different styles:
.main-nav li a {
float: left;
font-size: 15px;
color: #333;
padding: 10px 15px;
text-shadow: 1px 1px #DDD;
border-right: 1px solid rgba(0, 0, 0, .3);
border-left: 1px solid rgba(255, 255, 255, .5);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, #B3D09E),
color-stop(0.75, #A0B88E)
);
background-image: -o-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -moz-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -webkit-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -ms-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: linear-gradient(to bottom, #B3D09E 0%, #A0B88E 75%);
transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-webkit-transition: all 300ms;
}
.main-nav .current-menu-item a, .main-nav .current-page-ancestor a, .main-nav li a:hover {
color: #FFF;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #043420),
color-stop(1, #075A36)
);
text-shadow: none;
background-image: -o-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -moz-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -webkit-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -ms-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: linear-gradient(to bottom, #043420 0%, #075A36 100%);
}
I would like to avoid using jquery if I can. I feel like there should be some way to do this using just CSS instead of placing an image in the center of the button with jquery. Do I place an invisible div under each button with the arrow image centered and display it on the current page?
This is what I was given to follow for my menu. They didn't use quite the correct terminology. The 'Active' part of the image is the Current Page style:

Answer 1

You can use pseudo elements in CSS to add content, like ::after. By using the border property with different widths and colors you get a triangle shape. The only thing that can be a bit tricky is if you need the gradient to continue on to the arrow.
I put together a small demo. Hover the links in the menu to see the arrow.
DEMO
li:hover::after {
content: ' ';
position: absolute;
border: solid 10px transparent;
border-top: solid 0px transparent;
border-width: 10px;
left: 50%;
margin-left: -10px;
border-color: #222 transparent transparent transparent;
}