Question

I am currently working on a small landing page for my personal game project.
I wanted to have a nice link:hover effect, so I am using an :after element to position a trianle above the link, but the positioning is not working.

I threw together the code on jsfiddle.

Currently the triangle is positioned absolute and this is working in loads of tutorials, but it is not working with my span-elements.

Answer 1

Don’t forget to set position: relative to the <span> element:

span.linktopbar {
    ...
    position: relative;
}

Also, I’d set display: inline-block to prevent the scroll bar to appear when hovering.