背景颜色层与伪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。您需要为要应用的display: block和width属性设置height：

.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

以下是您要尝试做的一个示例。

对于伪元素，您应该使用“::”

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