伪元素不被视为单独的弹性项目答案

【问题标题】：Pseudo-element not being treated as separate flex item伪元素不被视为单独的弹性项目
【发布时间】：2026-02-22 12:00:01
【问题描述】：

我读过那个伪元素：

a) 附加到链接时不可点击
b) 被视为 flex 容器中的唯一项

但是我附加到链接的这个伪元素是：

a) 可点击
b) 不被视为单独的弹性项目

我错过了什么？

@import url(https://fonts.googleapis.com/css?family=Raleway);

body { 
  width: 100vw;
  height: 100vh;
  background: thistle;
  font-family: Raleway;
  text-align: center;
}

nav{
  display: inline-flex;
  margin-top: 40px;
  padding: 20px;
  background: white;
  border-radius: 10px;
}

a{
  text-decoration: none;
  color: black;
  margin: 0 10px;
}

a:nth-child(3):after{
      display: block;      
      width: 40px;
      height: 40px;      
      background: url(https://i.imgur.com/qRtsMi0.png);
      background-size: cover;
      content: "";      
}

<nav>
  <a href="#">ONE</a>
  <a href="#">TWO</a>
  <a href="#">THREE</a>
  <a href="#">FOUR</a>
  <a href="#">FIVE</a>
  <a href="#">SIX</a>
</nav>

【问题讨论】：

可点击？？只有cursor 是pointer （因为父级是a）但是您不能在单击时仅将函数附加到伪（如$('a:nth-child(3):after').click(...)）
a) 你读错了。插入链接的伪元素成为该链接的一部分，因此也可以单击以激活链接。 b) 您在 link 中插入了一个伪子元素，而不是 nav 元素。它必须是后者的伪子，因为 that 是 flex 容器。（如果你有 <a><span></span></a> 而不是伪元素，那现在不会使 span 成为与现有链接处于同一级别的弹性项目吗？）
您阅读的内容不正确。而且你的伪元素不在 flex 容器中。
谢谢。这是语义上的误解。

标签： css flexbox pseudo-element

【解决方案1】：

a) 附加到链接的伪元素确实是链接的一部分。它们不是“可点击”的，因为它们不能被 onClick 单独定位。

b) 附加到弹性容器的伪元素被视为项目。弹性容器中的伪元素附加到项目不是。

【讨论】：