列表悬停时的 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>