css - 带有伪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>

是否可以创建一个彩色背景层作为伪元素，我现在尝试但没有用

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

Answer 1

::before和 ::after默认情况下是 display: inline。您需要为要应用的 width 和 height 属性设置 display: block:

.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>