列表上的CSS箭头悬停

Question

我有一个列表菜单,边框为1px ... 100%宽度.

见图1:

现在来了困难的部分.当鼠标悬停在菜单项上时,我需要在项目悬停下发生这种情况:

见图2:

我怎样才能做到这一点？我一直在谷歌搜索,没有发现任何东西.

Answer 1

使用相对定位的列表项与旋转后的绝对位置相结合,为您提供了一个可能的解决方案:

* {
    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>