Why are pseudo elements not appearing on divs?

Question

I've added after pseudo element to divs, but from debugger view no pseudo elements are attached.

There are related posts, but I still cannot figure out why.

Any comments are appreciated.

Operations happen here:

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

demo, 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>

@Michael_B: Normally I'd hesitate to mark this type of question as a duplicate, but pretty much every "why is my pseudo-elt not showing" question has been marked as a dupe of that question, so... — BoltClock, Mar 03 '17 at 04:04
@BoltClock, fine with me. I didn't close as dupe only because `content` wasn't the only issue in play here. The question was equal parts `content`, combining `hover` with `::after`, and setting up the nearest positioned ancestor for abspos. — Michael Benjamin, Mar 03 '17 at 04:09

Michael Benjamin · Accepted Answer · 2017-03-03T03:20:30.203

4

Keep in mind that ::after and ::before pseudo-elements must always have the content property, even if the property is empty (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

edited Mar 03 '17 at 03:20

answered Mar 03 '17 at 01:33

Michael Benjamin

346,931
104
581
701

There 4 rows here, with content ONE, TWO, THREE and FOUR. Now we are discussing row ONE. The effect I need is that when I hover row ONE, the row ONE area will be darkened by after pseudo element. The pseudo element after is now visible, but its covered area is too large, larger than row-ONE-only area. <<<< This is my problem. – Yu Fang Mar 03 '17 at 03:06
1

By the way, I posted my own answer to the other question [explaining just *why* the content property was defined this way](http://stackoverflow.com/questions/17067918/why-do-the-before-and-after-pseudo-elements-require-a-content-property/42653230#42653230). – BoltClock Mar 08 '17 at 04:52

Why are pseudo elements not appearing on divs?

1 Answers1