Упаковка CSS:-:: Перед псевдоэлементом появляется выше контент, несмотря на использование правильного Z-индекса [дублиро ⇐ Html

[Anonymous]

Я пытаюсь создать светящийся пограничный эффект за. Точно так же, каждый. Button-Class также имеет :: перед псевдоэлементом для отдельного свечения. />.main-container
. Но :: перед элементами появляются над соответствующим их соответствующим контентом.CSS
*{
background-color: #0f0f2c;
color:aliceblue;
font-size: 20px;
}

body{
position: relative;
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
z-index:auto;

}
.main-container{
height: 70vh;
width: 350px;
position: relative;
background-color: #0f0f2c;
isolation: isolate;
border-radius: 20px;
z-index:1;

}
.main-container::before{
content: “”;
position: absolute;
inset: -1px;
box-shadow: 0 0 2px #333399,
0 0 2px #ff00cc,
0 0 1px #fffb00,
0 0 2px #00f0ff,
0 0 15px #333399;
background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
background-color: #f0c0ff;
border-radius: 22px;
z-index:0;

}

.output-display-container{
position: relative;
height: 140px;
width: 100%;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
border: none;
z-index:2;

}
.display-div{
height: 100px;
width: 100%;
margin: 20px;
padding: 5px;
box-shadow: 0 0 5px #ff00cc;
border-radius: 10px;
text-align: right;
/color: #333;/
text-align: right; / aligns text to the right /
direction: ltr; / keeps the text flow left to right /
overflow-x: hidden; / Dont want a scrollbar */
white-space: normal; /*wraps text */
border: 1px solid #ccc;
}
.buttons-container {
position:ralative;
height: calc(70vh - 170px);
width: calc(100% - 40px);
/box-shadow: 0 0 10px #ff00cc;/

margin: 20px;
margin-top: 10px;

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 10px;
z-index:2;
}
.button-class{
position:relative;
background-color: #0f0f2c;
box-shadow: 0 0 3px #ff00cc;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}

.button-class:hover {
transform: scale(1.05);
box-shadow: 0 0 5px #ff00cc;
}
.button-class::before{
content: “”;
position: absolute;
inset: -1px;
box-shadow: 0 0 2px #333399,
0 0 2px #ff00cc,
0 0 1px #fffb00,
0 0 2px #00f0ff,
0 0 15px #333399;
background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
background-color: #f0c0ff;
border-radius: 22px;
z-index:3;
}
< /code>
Пожалуйста, помогите !! . Класс. Все внутри .main-Container.
.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... sing-corre