i’ve designing an ::after effect
with the container without the ::after, the background-color works, but when i apply the ::after background-color doesnt works
here my code
here the background black works
.prices{
list-style: none;
display: flex;
font-size: 12px;
gap: 15px;
justify-content: center;
padding: 0;
opacity: 0;
}
.prices > li {
border: 1px solid white;
padding: 10px;
display: flex;
flex-direction: column;
width: calc(100% / 4);
align-items: center;
text-align: center;
justify-content: space-between;
background-color: black!important;
position: relative;
border-radius: 10px;
}
@property --angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.prices > li::after, .prices > li::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: conic-gradient( #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -100;
padding: 3px;
border-radius: 10px;
animation: 3s spin linear infinite;
transition: 500ms;
}
.prices > li::before{
filter: blur(1.5rem);
opacity: 0.5;
transition: 500ms;
}
@keyframes spin {
from{
--angle: 0deg
}
to{
--angle: 360deg
}
}
.prices > li ul{
list-style: none;
padding: 0;
}
#prices > h1, #contact > h1, #moreinfo > h1, #about > h1, #footer > h1{
margin: 0;
}<ul class="prices pricesAnim" style="opacity: 1;">
<li>
<h1>Ofimatica</h1>
<ul>
<li>
<h2>1 hora de uso</h2>
</li>
<li>
<h2>Intel Celeron 12th gen</h2>
</li>
<li>
<h2>8GB RAM</h2>
</li>
<li>
<h2>Paquete office</h2>
</li>
<li>
<h2>Impresion</h2>
</li>
</ul>
<h2>precio: $1000</h2>
</li>
</ul>but here when i add the animations:
.prices{
list-style: none;
display: flex;
font-size: 12px;
gap: 15px;
justify-content: center;
padding: 0;
opacity: 0;
}
.prices > li {
border: 1px solid white;
padding: 10px;
display: flex;
flex-direction: column;
width: calc(100% / 4);
align-items: center;
text-align: center;
justify-content: space-between;
background-color: black!important;
position: relative;
border-radius: 10px;
}
@property --angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.prices > li::after, .prices > li::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: conic-gradient( #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -100;
padding: 3px;
border-radius: 10px;
animation: 3s spin linear infinite;
transition: 500ms;
}
.prices > li::before{
filter: blur(1.5rem);
opacity: 0.5;
transition: 500ms;
}
@keyframes spin {
from{
--angle: 0deg
}
to{
--angle: 360deg
}
}
.prices > li ul{
list-style: none;
padding: 0;
}
#prices > h1, #contact > h1, #moreinfo > h1, #about > h1, #footer > h1{
margin: 0;
}
/* HERE I ADD THE ANIMATIONS => THEN BACKGROUND BLACK DOESNT WORKS */
.pricesAnim > li:nth-child(1){
opacity: 0;
animation-delay: 250ms;
animation: fadeIn 1s forwards;
}
.pricesAnim > li:nth-child(2){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 500ms;
}
.pricesAnim > li:nth-child(3){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 750ms;
}
.pricesAnim > li:nth-child(4){
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 1000ms;
}
@keyframes fadeIn {
0%{
opacity: 0;
transform: translateY(90px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}<ul class="prices pricesAnim" style="opacity: 1;">
<li>
<h1>Ofimatica</h1>
<ul>
<li>
<h2>1 hora de uso</h2>
</li>
<li>
<h2>Intel Celeron 12th gen</h2>
</li>
<li>
<h2>8GB RAM</h2>
</li>
<li>
<h2>Paquete office</h2>
</li>
<li>
<h2>Impresion</h2>
</li>
</ul>
<h2>precio: $1000</h2>
</li>
</ul>the black background doesnt works, any idea? of what is wrong?