Question

我已将after伪元素添加到div，但是从调试器视图中没有附加伪元素。

有相关帖子，但我仍然无法弄清楚原因。

感谢任何评论。

此处发生的操作：

.col >  div:nth-child(1) {
    background:url("http://gdurl.com/hZIP");
    background-size:cover;
}
.col >  div:nth-child(1):after{
    position:absolute;
    top:0; left:0;  
    width:100%;height:100%;    
    background-color:black;
 }

演示， https://jsfiddle.net/Debra321/432574uc/62/

html {
  box-sizing: border-box;
}

body {
  background: #fcfca4;
  background: linear-gradient(to top right, #F3E9D2, #EC9192);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#phoneContent {
  position: absolute;
  top: 17.7%;
  left: 50px;
  width: 253px;
  height: 455px;
  display: block;
  margin: auto;
  overflow: auto;
}

#phoneContent .col {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.col>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.col>div:nth-child(1) {
  background: url("http://gdurl.com/hZIP");
  background-size: cover;
  //filter: brightness(50%);
}

.col>div:nth-child(1):after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  //opacity:0;
  //transition: opacity 0.5s;
  //background:rgba(0,0,0,0.6);
}

.col>div:nth-child(1) :hover:after {
  opacity: 1;
}

.col>div:nth-child(2) {
  background-color: red;
}

.col>div:nth-child(3) {
  background-color: blue;
}

.col>div:nth-child(4) {
  background-color: red;
}

.st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #DBDDDD;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #FFFFFF;
}

.st3 {
  fill: none;
  stroke: #E5E5E5;
  stroke-miterlimit: 10;
}

.st4 {
  opacity: 0.3;
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

#myPhone {
  position: relative;
  width: 350px;
  height: 700px;
  display: block;
  margin: auto;
}

Apply local draft version or discard it

<body>
  <div id="myPhone">
    <div id="phonediv">
      <svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 500" style="enable-background:new 0 0 250 500;" xml:space="preserve">
<g>
	<path class="st0" d="M21,104.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V104.5z"/>
	<path class="st0" d="M21,143.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V143.5z"/>
	<path class="st0" d="M21,182.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V182.5z"/>
</g>
<path class="st0" d="M200.5,23.3H53.7c-22.6,0-35.1,15.2-35.1,34.4v387.9c0,21.4,16.6,35.1,35.1,35.1h146.8
	c19.7,0,34.4-15.9,34.4-35.1V57.7C234.9,38.5,221.9,23.3,200.5,23.3z M217.6,414.6H35.1V87.2h182.5V414.6z"/>
<path class="st0" d="M200.5,476.2H53.7c-14.7,0-30.6-11.7-30.6-30.6V57.7c0-17,13.2-29.9,30.6-29.9h146.8
	c16.7,0,29.9,13.1,29.9,29.9v387.9C230.4,461.6,216.1,476.2,200.5,476.2z M53.7,28.6c-17,0-29.9,12.5-29.9,29.1v387.9
	c0,20.4,17.8,29.9,29.9,29.9h146.8c15.2,0,29.1-14.2,29.1-29.9V57.7c0-16.3-12.8-29.1-29.1-29.1H53.7z"/>
<circle class="st1" cx="127.1" cy="445.2" r="19.9"/>
<g>
	<path class="st2" d="M127.1,427.1c10.4,0,18.9,8.5,18.9,18.9c0,10.4-8.5,18.9-18.9,18.9c-10.4,0-18.9-8.5-18.9-18.9
		C108.2,435.6,116.7,427.1,127.1,427.1 M127.1,426.1c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9
		C147,435,138.1,426.1,127.1,426.1L127.1,426.1z"/>
</g>
<path class="st3" d="M131.2,453.6h-9c-1.7,0-3-1.4-3-3v-9c0-1.7,1.4-3,3-3h9c1.7,0,3,1.4,3,3v9C134.2,452.3,132.9,453.6,131.2,453.6
	z M122.2,439.4c-1.2,0-2.3,1-2.3,2.3v9c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.3-1,2.3-2.3v-9c0-1.2-1-2.3-2.3-2.3H122.2z"/>
<path class="st0" d="M146,50.5c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5h35
	C144.9,48,146,49.1,146,50.5L146,50.5z"/>
<line class="st4" x1="34.5" y1="87" x2="217" y2="87"/>
</svg>
    </div>
    <div id="phoneContent">
      <div class="col">
        <div>

        </div>
        <div>
          <h1>
            TWO
          </h1>
        </div>
        <div>
          <h1>
            THREE
          </h1>
        </div>
        <div>
          <h1>
            FOUR
          </h1>
        </div>

      </div>

    </div>
  </div>
</body>

Answer 1

请注意，::after和::before伪元素必须始终具有content属性，即使该属性为空（content: ""）。

.col > div:nth-child(1) {
  background: url("http://gdurl.com/hZIP");
  background-size: cover;
  filter: brightness(50%);
  position: relative; /* establish nearest positioned ancestor for absolute positioning */
}


.col > div:nth-child(1):hover::after {
  content: ""; /* necessary for pseudo-elements to work */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer; /* optional */
}

revised fiddle

为什么伪元素不出现在div上？

1 个答案: