CSS :after element relative position

Question

I want to add an arrow effect to a list item (li) on it's hover but it's position does not act relative to list item. When I add left: 50% attiribute to :after element, every individual arrow become centered to ul instead of it's list item. Without left: 50% attiribute, arrows are under their list item's but not centered. So I'm a litte bit stucked here.

Here is my CSS:

nav.main-nav 
{
    position: absolute;
    z-index: 100;
    width: 980px;
}
    nav.main-nav > ul > li
    {
        position: relative;
        display: table-cell;
        list-style-type: none;            
        vertical-align: middle;
     }
     nav.main-nav > ul > li:hover
     {
         background-color: #304a60;
     }

          nav.main-nav > ul > li:hover:after
          {
                content: "";
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #304a60;
                position: absolute;
                bottom: -10px;
                left: 50%;
           }

Any help will be appriciated, thanks.

Div's with position:absolute can't find his parent with display: table-cell. Remove this css or add new parent — Anon
– Anon, Commented Aug 5, 2013 at 14:14
The left side of the triangle looks centered to me, just move it 10px left to center it... or am I missing something? jsfiddle.net/FyUU8/2 (also, firefox bugs with the table-cell display, changed to inline) — xec
– xec, Commented Aug 5, 2013 at 14:14

ralph.m · Accepted Answer · 2013-08-05 14:18:24Z

3

I would put the arrow on the a itself, which you can set to display: block and position: relative. Then you have your positioning context for a:after.

answered Aug 5, 2013 at 14:18

ralph.m

14.4k4 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS :after element relative position

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related