title: Testing the pseudo-element of a referenced styled component
body: <p>I have a toggle switch where my styled input component references my styled label component</p>
  <pre><code>const Knob = styled.span`
    position: absolute;
    top: 0;
    left: 0;
    width: 3.25rem;
    height: 2rem;
    border-radius: 15px;
    background: ${basic[600]};
    cursor: pointer;
    &amp;::after {
      content: &quot;&quot;;
      display: block;
      border-radius: 50%;
      width: 1.7rem;
      height: 1.7rem;
      margin: 3px;
      background: #ffffff;
      transition: 0.2s;
    }
  `;
  
  const Toggle = styled.label`
    position: relative;
    ${applyStyleModifiers(BUTTON_MODIFIERS_STATUS)};
  `;
  
  const Check = styled.input`
    opacity: 0;
    z-index: 1;
    &amp;:checked + ${Knob} {
      background: ${primary[500]};
      &amp;::after {
        content: &quot;&quot;;
        display: block;
        border-radius: 50%;
        width: 1.7rem;
        height: 1.7rem;
        margin-left: 1.3125rem;
        transition: 0.2s;
      }
    }
  `;
  </code></pre>
  <p>When the <code>Check</code> component is checked the <code>Knob</code> component has some of its styles updated.
  I want to test the styles of the pseudo-element before and after the checkbox is clicked.</p>
  <p>I am able to successfully test styles before</p>
  <pre><code>    const { getByTestId } = render(&lt;ToggleSwitch ariaLabel=&quot;primary&quot; /&gt;);
      const toggle = getByTestId(&quot;toggle-switch&quot;);
      const checkbox = getByTestId(&quot;toggle-checkbox&quot;);
      expect(toggle).toHaveStyleRule(&quot;border-radius&quot;, &quot;50%&quot;, {
        modifier: &quot;&amp;::after&quot;,
      });
  </code></pre>
  <p>After I click the checkbox I am still able to test the background of the <code>Knob</code> component using <code>toHaveStyle</code> rather than <code>toHaveStyleRule</code> as this is not part of the pseudo-element <code>:after</code>.</p>
  <pre><code>   expect(checkbox.checked).toEqual(false);
      fireEvent.click(checkbox);
      expect(checkbox.checked).toEqual(true);
  
      expect(toggle).toHaveStyle(`background : ${primary[500]}`);
  </code></pre>
  <p>However I am not able to test any of the changes on the pseudo-element.</p>
  <pre><code>    expect(toggle).toHaveStyleRule(&quot;margin&quot;, &quot;1.3125rem&quot;, {
        modifier: &quot;&amp;::after&quot;,
      });
  </code></pre>
  <p>The above does not work and tells me that the expected <code>margin</code> is still 3px. What I believe I need to do is use <code>toHaveStyle</code> and attach the <code>&amp;::after</code> modifier, but I have had no success with this yet.</p>
  <p>When I try</p>
  <pre><code>expect(toggle).toHaveStyle(`margin : 1.3125rem`, { modifier: &quot;&amp;::after&quot; });
  </code></pre>
  <p>My test fails and indicated margin is not found on this component.</p>