EDIT: Okay, I've figured out how to get it where it belongs with position: absolute; but then it hangs off the left side of the navbar/tabmenu. I want to avoid that if all possible. So, if you know a way I can make only the active tab on the tab menu be extended by roughly 20px to the left and the text move appropriately so I have enough room to put on the cursor image absolutely, that's also an acceptable answer.

Subreddit is /r/FFIII.

Current CSS:

#header .tabmenu li.selected a::before {
    background-image: url(%%pointer%%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    display: inline-block;
    width: 30px; 
    height: 30px;
    content: "";
}

I'd like to get that pointer a bit further down. Any and all help is greatly appreciated.

EDIT2: Resolved! After adding the padding as suggested, the cursor stopped moving with the selected tab, even though it was moving before. This behavior remained even after removing the padding. On the plus side, after adding and removing the padding, the position: relative tag began to add padding even though it wasn't before. Bizarre, but hey, that's how this sort of thing goes. I have magic code in my CSS now.