html - 在菜单项的悬停上创建菱形

我有一个菜单项，将鼠标悬停在它上方时，它会下拉一个橙色框。

.menu > li > a:hover:after {
    position: absolute;
    left: 0px;
    border-style: solid;
    border-color: transparent;
}

但是，我试图在下拉框下方实现菱形效果。

我在此处看到一个链接了此[website] [4]的帖子，我尝试使用diamond:after方法，但是结果很遥远。我已经评论了需要编辑的CSS部分，以供快速参考。如果有人可以帮助。

最佳答案

1）在您的CSS中，：after psuedo-element（.menu > li > a:hover:after {/* your css */}）没有声明。
例如：

.menu > li > a:hover:after {
    content: ""; /* empty content */
    position: absolute;
    bottom: -50px; /* position 50px below the bottom of the menu link */
    left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 60px; /* diamond has 60px to the left and to the right of the midpoint, so the menu item should be 120px width */
    border-top: 50px solid #FF6E0D;
}

此方法要求您指定菜单项的宽度，因为您希望菱形跨越链接的整个底部。 （使用左/右border-width。）

2）要使用此方法，应在position: relative;声明中添加.menu > li > a，因为：after psuedo-element需要使用此元素来定位自身。

关于html - 在菜单项的悬停上创建菱形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28794487/