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

这是您尝试执行的操作的示例。

对于伪元素你也应该使用 "::"

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

Answer 2

::before and ::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>

带有伪 css 的背景色层

Background color layer with pseudo css

css

pseudo-element