Question

我已经阅读了这些伪元素：

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>

Answer 1

a）附加到链接的伪元素确实是链接的一部分。它们无法通过onClick分别定位，因此无法“点击”。

b）附加到弹性容器的伪元素被视为项目。 附加到弹性容器中项目的伪元素没有。

伪元素未被视为单独的弹性项目

1 个答案: