Css 为什么不根据父div计算：：after元素的宽度百分比？

我正试图解决这个问题：

它在本代码笔中显示：

我想要的是那个黄色的图像重复它自己。它在代码笔中工作得很好，但是当我试图在我的真实代码中实现它时，它就不起作用了

实际上，图像不是纯色，而是与标题匹配的条纹。基于梯度的解决方案不适用于此

这是我真正的html：

  <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">

      <header>
        <div class="top-row">
          <a href="/index.html" class="clickable-area"></a>
          <div class="top-ad">
          <script>
          </script>
          </div>
        </div>
       ...
       </header>
       ...
   </div>
</div>

让一个同事工作是不可能的，或者是太多的工作，因为我需要基础5 SCSS。< /P> 在chromium中检查显示：：after元素的宽度为0。 当我将宽度更改为calc50%或50%时，它显示600px。 div顶行的宽度限制为1200px，但页眉大小与浏览器大小无关

宽度应为标题的50%，而不是顶行的50%

更准确地说，它应该是calc50%-$row width/2，$row width/2正确地计算为600px实际rems，所以这不是问题

为什么将this:：after元素的宽度设置为它的父元素是，而不是

---

如何使其工作？

根据您的评论，但是.top row不应该是.top row:：after的父级，我怀疑您混淆了：：after的作用

是虚拟元素的伪选择器，该虚拟元素在所选元素的子元素中位于最后

在您的代码中，In.top row:：after中的：：after将出现在此处：

<div class="top-row">
  <a href="/index.html" class="clickable-area"></a>
  <div class="top-ad">
  <script>
  </script>
  </div>
  ::after
</div>

---

因此，virtual:：after元素的父元素是.top row。

浏览器中是否遵循正确的运算符优先级？如果不是50%-$row width/2将显示为0。如：600px-600px/2所示。在代码笔上，父元素是1000px，您告诉伪元素是50%-500px，即500-500=0@Ouroborus-铬显示编译结果为calc50%-37。5rem@pol-它在代码笔中工作，请检查代码笔。标题不是1200px，它更大，但最上面一行是1200px。但是.top row不应该是.top row:：after的父级。就是这样，我把它作为header:：after，它现在就可以工作了。我想，在把它变成兄弟姐妹之后，这对我来说是很直观的。谢谢

<div class="top-row">
  <a href="/index.html" class="clickable-area"></a>
  <div class="top-ad">
  <script>
  </script>
  </div>
  ::after
</div>