Hintergrundfarbschicht mit Pseudo-CSS

Question

.product-item-info::after { 
 
      background-color: #e3e3e3; 
 
      content:" "; 
 
      height:300px; 
 
      width:300px; 
 
     } 
 

 
.product-item-info { 
 
    height: 300px; 
 
}

<div class="product-item-info"></div>

Ist es möglich, eine Farbe Hintergrundschicht als Pseudo-Element zu schaffen, was ich versuche jetzt und arbeitet nicht

.product-item-info:after { 
    background-color: #e3e3e3; 
    content:""; 
    height:300px; 
    width:400px; 
} 

Answer 1

::before und ::after sind display: inline standardmäßig verwenden.

.product-item-info::after { 
 
    background-color: #e3e3e3; 
 
    content:" "; 
 
    height: 300px; 
 
    width: 300px; 
 
    display: block; /* this is what you need */ 
 
} 
 

 
.product-item-info { 
 
    height: 300px; 
 
    background-color: red; /* for demonstration purposes */ 
 
}

<div class="product-item-info"></div>

Answer 2

Hier ist ein Beispiel was du versuchst zu tun.

Auch für Pseudo-Elemente sollten Sie "::"

.product-item-info { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 
.product-item-info::before { 
 
    background-color: lightgreen; 
 
    content: " "; 
 
    height: 150px; 
 
    width: 150px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.product-item-info::after { 
 
    background-color: lightblue; 
 
    content: " "; 
 
    height: 150px; 
 
    width: 150px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="product-item-info"></div>