如何使用:: After

Question

我正在尝试使用::after创建一个堆叠的盒子外观。我在一个代码笔（https://codepen.io/nk-creative/pen/vqvVJL）中创建了代码，但是当我将代码放置在正在使用的Wordpress网站上时，无法以相同的顺序（http://aptw.nk-creative.com/）达到相同的堆叠效果

我在代码笔（https://codepen.io/nk-creative/pen/vqvVJL）中创建了代码。

<div class="offset-boxes">
  <h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>


.offset-boxes {
    position: relative;
    max-width: 300px;
    height: 290px;
    background-color: lightpink;
  margin-top: 20px;
  padding: 25px
}

.offset-boxes::after {
    content: "";
    width: 100%;
  right: -40px;
  top: -40px;
    height: 100%;
    background-color: red;
    position: absolute;
    z-index: -1; 
}

我希望代码看起来像是代笔，但WP网站却不然。

Answer 1

您的::after伪元素似乎已被掩埋。您可以将其添加到CSS中.offset-boxes的父元素：

.textwidget {
    position: relative;
    z-index: 1;
}