在填充空间之外和水平居中显示 ::after 伪元素

Question

我尝试在导航栏的列表项下添加一个小三角形作为当前页面指示器，使用 ::after 类“活动”。

然而，

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

2. 网站应该是响应式的。当我调整窗口屏幕大小时，列表项被压缩并扩大列表的宽度。同样，由于列表项的长度差异，如果三角形的一部分位于短列表项下，则会被覆盖，因为 "::after" 忽略了填充空间。

这里是sn-p的代码：

nav {
  display: block;
}

ul {
  display: table;
  text-align: center;
  background-color: red;
  margin-bottom: 5%;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

li {
  display: table-cell;
  float: none;
  padding: 5px 0;
  vertical-align: middle;
  position: relative
}

li.active::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 40%;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: red transparent transparent transparent;
}

<nav>
  <ul>
    <li>xxxxxxxxxxxxxxxxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li class="active">xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</nav>

有什么解决办法吗？

Answer 1

将li.active:after 中的right: 40% 替换为：

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

请看下面的演示：

nav {
  display: block;
}

ul {
  display: table;
  text-align: center;
  background-color: red;
  margin-bottom: 5%;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

li {
  display: table-cell;
  float: none;
  padding: 5px 0;
  vertical-align: middle;
  position: relative
}

li.active::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  transform: translate(50%, 100%);
  right: 50%;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: red transparent transparent transparent;
}

<nav>
  <ul>
    <li>xxxxxxxxxxxxxxxxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li class="active">xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</nav>

Answer 2

你快到了。

您可以通过在 CSS 中使用 calc() 来解决水平位置问题。 It's worth looking at the CanIUse data for this 检查它的支持。

如果您希望箭头位于中心，您可以使用它来计算箭头的位置，方法是从 50% 中减去箭头宽度的一半；

left: calc(50% - 10px)

然后，您只需要在 bottom 位置属性上设置一个负位置，即可将箭头置于列表元素下方。

bottom: -15px;

这是一个工作代码 sn-p;

nav{
    display: block;
}

ul{
    display: table;
    text-align: center;
    background-color: red;
    margin-bottom: 5%;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

li{    
    display: table-cell;
    float: none;
    padding: 5px 0;
    vertical-align: middle;
    position: relative
}

li.active::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: calc(50% - 10px);
      bottom: -15px;
      border-style: solid;
      border-width: 15px 10px 0 10px;
      border-color: red transparent transparent transparent;
}

<nav>
<ul>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxx</li> 
<li>xxxx</li> 
<li class="active">xxxx</li> 
<li>xxxx</li> 
<li>xxxx</li> 
<li>xxxx</li> 
</ul>
</nav>