Html CSS：在样式之前

我想在菜单元素的

悬停

状态上实现如下功能：

我无法做到这一点：由于某些原因，可能是缺乏知识

你可以看到我到目前为止所做的。

---

正如您可以看到的那样，我的

：在此之前，

选择器没有与

a

标记完全对齐，并且我没有漂亮的等腰三角形。您认为使用背景图像会更容易吗？

您可以使用您在问题中所述的

:before

选择器，并将其与一些绝对定位混合，从而获得所需的效果

这显然需要更多的清理，以使其符合您的喜好，但这是一个很好的起点

ul{
浮动：对；
文本对齐：右对齐；
}
李{
列表样式：无；
填充物：5px；
}
李：悬停{
背景：红色；
位置：相对位置；
}
李：悬停：之前{
内容：''；
位置：绝对位置；
排名：0；
左：-10px；
边框顶部：14px实心红色；
边框底部：14px实心红色；
左边框：10px实心透明；
}

试验
试验
试验
试验

我希望这能对您有所帮助

正文{
保证金：0；
背景色：浅绿色；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
文本对齐：右对齐；
}
a{
颜色：#ccc；
显示：内联块；
填充：5px20px 5px15px；
文字装饰：无；
文本转换：大写；
位置：相对位置；
}
a、 活动，a:悬停{
背景颜色：深红色；
颜色：白色；
}
a、 活动：：之前，
a:悬停：：之前，
a、 活动：：之后，
a:悬停：：之后
{
位置：绝对位置；
左：-15px；
内容：“；
宽度：0；
身高：0；
边框样式：实心；
}
a、 活动：之前，
a:悬停：在之前{
边框宽度：0 15px 15px 0；
边框颜色：透明深红色透明；
排名：0；
}
a、 活动：之后，
a:悬停：之后{
边框宽度：0 0 15px 15px；
边框颜色：透明深红透明；
底部：0；
}

JSFIDLE中的：：after在哪里？你能给我们一个完整的JSFIDLE示例吗？对不起，是在之前，而不是之后：）我在这里做得更简单：@FlorinPop很好。将

边框宽度

更改为

边框宽度：13px 10px