在 padding space 之外并水平居中显示 ::after 伪元素

Question

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

然而，

由于长度不同，三角形的对齐方式可能不是所有列表项的中心。
网站应该是响应式的。当我调整 window 屏幕大小时，列表项被压缩并扩大了列表的宽度。同样，由于列表项的长度差异，如果三角形位于较短的列表项下，则部分三角形将被覆盖，因为“::after”忽略了填充 space.

这是代码片段：

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;

这是一个有效的代码片段；

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>

在 padding space 之外并水平居中显示 ::after 伪元素

Display the ::after pseudo-element outside padding space and horizontally center

html

css

css-position

pseudo-element