CSS arrow on list hover

Question

I have a list menu with a border which goes 1px ...100% width.

See image 1:

Now comes the hard part. When mouse is hovered on a menu item I need this to happen under the item hovered:

See image 2:

How can I do this? I've been googling and found nothing on it.

On hover create a arrow using pseudo elements - http://cssarrowplease.com/ — Luís P. A., Oct 16 '15 at 10:46

score 7 · Accepted Answer · answered Oct 16 '15 at 10:49

Using relative positioned list-items combined with a rotated, absolute positioned after gives you a possible solution:

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    display: inline-block;
    vertical-align: top;
    padding: 1em 3em;
    margin-right: -4px;
    border-bottom: 1px solid black;
    position: relative;
}
ul li:hover:after {
    content: ' ';
    display: block;
    height: 16px;
    width: 16px;
    background: white;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    transform: rotate(45deg);
    bottom:-9px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS arrow on list hover

1 Answers1