Html 在填充空间外水平居中显示：：after伪元素

我尝试在navbar的列表项下添加一个小三角形作为当前页面指示器，使用：：after类“active”

但是,

由于长度不同，三角形的对齐可能不是所有列表项的中心

网站应该是响应性的。当我调整窗口屏幕的大小时，列表项被压缩并扩大列表的宽度。同样，由于列表项的长度不同，如果三角形的一部分位于短列表项下，则它将被覆盖，因为“：：after”忽略了填充空间

下面是代码片段：

nav{
显示：块；
}
保险商实验室{
显示：表格；
文本对齐：居中；
背景色：红色；
利润底部：5%；
宽度：100%；
左侧填充：0；
页边距底部：0；
列表样式：无；
}
李{
显示：表格单元格；
浮动：无；
填充：5px0；
垂直对齐：中间对齐；
职位：相对
}
活动：：之后{
内容：“；
宽度：0；
身高：0；
位置：绝对位置；
右：40%；
边框样式：实心；
边框宽度：15px 10px 0 10px；
边框颜色：红色透明；
}

XXXXXXXXXXXXXXXX
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx

在

li中替换
右侧：40%
。活动：在
之后使用以下内容：

bottom: 0; /* aligns to the bottom*/
right: 50%;
transform: translate(50%, 100%); /* centering */

请参见下面的演示：


nav{
显示：块；
}
保险商实验室{
显示：表格；
文本对齐：居中；
背景色：红色；
利润底部：5%；
宽度：100%；
左侧填充：0；
页边距底部：0；
列表样式：无；
}
李{
显示：表格单元格；
浮动：无；
填充：5px0；
垂直对齐：中间对齐；
职位：相对
}
活动：：之后{
内容：“；
宽度：0；
身高：0；
位置：绝对位置；
底部：0；
转换：翻译（50%，100%）；
右：50%；
边框样式：实心；
边框宽度：15px 10px 0 10px；
边框颜色：红色透明；
}


XXXXXXXXXXXXXXXX
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx

你就快到了

您可以通过在CSS中使用
calc（）
来解决水平位置问题。检查它的支撑

你可以用它来计算你的箭头的位置，如果你想让它在中心，用50%减去你的箭头宽度的一半

left: calc(50% - 10px)

然后，只需在
底部的
位置属性上设置一个负数位置，即可将箭头置于列表元素下方

bottom: -15px;

下面是一段有效的代码片段


nav{
显示：块；
}
保险商实验室{
显示：表格；
文本对齐：居中；
背景色：红色；
利润底部：5%；
宽度：100%；
左侧填充：0；
页边距底部：0；
列表样式：无；
}
li{
显示：表格单元格；
浮动：无；
填充：5px0；
垂直对齐：中间对齐；
职位：相对
}
活动：：之后{
内容：“；
宽度：0；
身高：0；
位置：绝对位置；
左：计算（50%-10px）；
底部：-15px；
边框样式：实心；
边框宽度：15px 10px 0 10px；
边框颜色：红色透明；
}


XXXXXXXXXXXXXXXX
xxxx
xxxx
xxxx

xxxx
xxxx
xxxx

Nice（r）备选方案！非常感谢你的帮助！现在我了解了一些关于calc（）的新知识！