是否可以使用 CSS ::after 伪元素生成 HTML div

Question

这可能是一个愚蠢的问题，但我必须澄清这个事实。所以这是我关心的问题。我可以设置两个div元素的样式，如下所示。

.element-container{
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
}
.element{
    z-index:1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    border-radius: 20px;
    display: inline-block;
    border: 2px solid black;
}
.element-shadow{
    z-index: -1;
    top: 10%;
    left: 4%;
    border-radius: 20px;
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="element-container">
  <div class="element"></div>
  <div class="element-shadow"></div>
</div>

我的问题是我们可以使用 ::after 伪元素做同样的事情。基本上，我们可以在渲染到 DOM 中的其他元素之后添加一个 html 元素（创建shadow effectafter元素，因此如果使用相同的样式但使用 :: 创建，则在某处使用它时element，有人不需要关心 html 元素的实际大小）在伪元素之后）elementshadow element

@Telary 的答案对于问题的上半部分（原始问题）是可以接受的，但现在它引导我到另一个问题，我尝试对 an 做同样的事情<button>，但它没有按预期工作。我在这里错过了什么？下面的代码是我的新问题

.but{
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    outline:none;
    border-radius: 500px;
    display: inline-block;
    border: 2px solid black;
    color: black;
    font-size: 250%;
    padding: 20px 100px;
}
.but:after{
    content:'';
    z-index: -1;
    top: 8%;
    left: 3%;
    border-radius: 500px;
    display: inline-block;
    background-color: rgba(140,122,230,1);
    position: absolute;
}

<button class="but">GO</button>

是因为我把外面的<div>元素去掉了吗？

Answer 1

您可以使用下面的代码来达到所需的效果：

   .element-container{
    display: flex;
    position:relative;
    width: 300px;
    height: 100px;
    z-index: 1;
}
.element{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    border-radius: 20px;
    display: inline-block;
    border: 2px solid black;
}
.element:after{
    content:'';
    display: inline-block;
    top: 10%;
    left: 4%;
    border-radius: 20px;
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}

<div class="element-container">
  <div class="element"></div>
</div>

您需要删除“.element”选择器中的 z-index，将其放在“shadow”层的顶部。