title: Remove excess padding after transformY on predecessor's ::after
body: <p>(Wow, that was a lousy title!)</p>
  <p>I created a little quarter-circle to display after a div. I then used transformY to move it back up the div so that some content overlaps, which is the user's design requirement.</p>
  <p>However, doing so leaves some excess space at the bottom of the div... the div retains the full height after the transform. I'd like to reduce that height.</p>
  <p>I'm working in a page builder (ClickFunnels). Here's the link: <a href="https://www.goupperpeninsula.com/get-your-arts-on" rel="nofollow noreferrer">https://www.goupperpeninsula.com/get-your-arts-on</a></p>
  <p>Here's the CSS:</p>
  <pre><code>#section-1852710000::after,
  #section-1852710000::before {
      content: '';
      position: relative;    
      display: block;
      background: #ffe121;  
      width: 285px;
      height: 285px;
  }
  
  #section-1852710000::after {
      border-top-right-radius: 285px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  </code></pre>
  <p>Here's the space I'd like to eliminate:</p>
  <p><a href="https://i.stack.imgur.com/Aj35b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Aj35b.jpg" alt="enter image description here" /></a></p>
  <p>I feel like I'm missing something obvious, I'm just not quite sure what it is!</p>