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