title: CSS: Skewed button using pseudo position: absolute
body: <p>I have a button with only a single tag (<code>&lt;a&gt;</code>). I want to skew the background of the button and keep the text as is, so I'm using <a href="https://codepen.io/irishrunnergriffin/pen/JjMMYPK" rel="nofollow noreferrer">this code</a>, which is working as expected in my Codepen example:</p>
  <pre><code>&lt;a class=&quot;et_pb_button et_pb_pricing_table_button&quot; href=&quot;#&quot;&gt;$200 / Month&lt;/a&gt;
  </code></pre>
  <pre><code>.et_pb_pricing_table_button {
      margin: 10px;
      cursor: pointer;
      background-color: transparent;
      border: none;
      height: 50px;
      padding: 10px 60px;
      position: relative;
      color: #000000;
      font-weight: bold;
    text-decoration: none;
  }
  .et_pb_pricing_table_button:after {
      z-index: -1;
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: skewX(-15deg);
      border-radius: 0px;
      background-color: #ffd100;
  }
  .et_pb_pricing_table_button:hover:after{
      background-color: skyblue;
  }
  </code></pre>
  <p>However, when I apply that code to <a href="https://nerunsdev.wpengine.com/" rel="nofollow noreferrer">my page</a>, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?</p>