Adding Small Arrow Under Current Page In Wordpress With Css

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

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