Можно ли сгенерировать HTML-div с помощью псевдоэлемента CSS :: after

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.По сути, мы можем добавить элемент html после того, как какой-то другой элемент рендерится в DOM (сделать shadow effect после создания element, так что кому-то не нужно беспокоиться о реальном размере element при его использовании где-либо, еслиshadow element создан с теми же стилями, но с псевдоэлементом :: after)

@ Ответ Телари приемлем с этой верхней частью вопроса (оригинальный вопрос) Но теперь он наводит меня на другой вопрос, я пыталсясделать то же самое с <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>

Вам необходимо удалить z-index в селекторе ".element", чтобы поместить его поверх слоя "shadow".