問題描述
帶有偽 css 的背景顏色層 (Background color layer with pseudo css)
.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;
}
參考解法
方法 1:
::before and ::after are display: inline by default. You'll want to set display: block for your width and height properties to be applied:
.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>方法 2:
Here is an example of what you are trying to do.
Also for pseudo elements you should use "::"
.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>(by fefe、André Dion、dimshik)