html - 是否可以使用 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 effect 之后创建 element ，这样在某个地方使用它时，如果element 使用相同的样式创建，但使用::after 伪元素)

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

.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>

是不是因为我去掉了外面的<button>元素？

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”层的顶部。