Question posted in 
I’ve designed an ::after effect. With the container and without the ::after, the background-color works, but when I apply the ::after, background-color doesn’t work.
Here is my code. Here, the black background 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>Here, 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 DOESN'T WORK */
.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 doesn’t work. What is wrong?
pd: the nth-child(1) is for various li wrapers, i have four, and for dont make the code too large, i only put one li for the example here
2
Answers
.pricesAnim>li:nth-child(1)is applying the animation to the wrapper liI think you want to animate the inner list items, so use
.pricesAnim>li>ul>li:nth-child(1)Edit: For animating the whole card up, apply the animation to
pricesAniminstead of its first elementThe problem is that different stacking contexts are being created (by e.g. the opacity and transform settings).
This snippet moves the black background, which hides most of the after element, into the background of the after element itself, as the first image (a linear-gradient).
This is sized so it doesn’t cover quite all the pseudo element.
The white ‘inner’ border is created using a negatively displaced offset on the pseudo element.
You may want to play around with the px settings to get exactly what you want, but be careful of the problem which sometimes arises if using small px values when the system has to map between CSS and screen pixels on modern displays (sometimes a part CSS pixel, or one whole screen pixel, can get ‘left behind’). So 1px values are not used here.