I've applied a after pseudo element to divs, but when I check the debugger view, no pseudo elements are showing up.
Even after looking at related posts, I still can't figure out why this is happening.
I would really appreciate any feedback or comments on this issue.
The operations that occur here are:
.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;
}
Here's a 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"/>
&;// more SVG code below...
<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>