Как исправить ребенка, заменяющего его родительский фон при попытке добавить светящуюся границу? ⇐ Javascript

[Anonymous]

Я сейчас создаю свой портфель и сталкиваюсь с раздражающей проблемой. Я пытаюсь добавить анимированную границу в мою карту в моем контейнере. То, как структурирован HTML, это то, что у меня есть карта в файле контейнера, в которой находятся текст, а также кнопки. Я использую :: до и :: после, но кажется, что при корректировке индекса :: до и :: после того, как оказаться за самой картой, кажется, полностью заменяет свой опыт родителей, а не добавляя светящийся аффект. < /p>
Вот код CSS Я также могу прикрепить HTML -код, если необходимо: < /p>
.container {
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 4rem;
padding-bottom: 4rem;
padding-inline: 10px;
}
.container .main-text {
background: #313435;
max-width: 1000px;
padding-inline: 20px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
border-radius: 10px;
position: relative;
z-index: 1;
}
.container .main-text::before,
.container .main-text::after {
content: "";
position: absolute;
inset: -15px;
z-index: -1;
background: conic-gradient(
from var(--gradient-angle),
#904E55,
#97353e,
#9b0c1a,
#97353e,
#904E55
);
border-radius: inherit;
animation: rotation 20s linear infinite;
}
.container .main-text::after {
filter: blur(30px);
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... dd-glowing