使用伪元素覆盖

Question

  <div class="box small">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <div class="detail"> for more info click below</div>
    <div class="read-more"> click</div>
 </div>

Css

.detail{
      position: relative;
}
.detail:after{
  content: "";
  display: block;
  position: fixed; /* could also be absolute */ 
  bottom: 0;
  left: 0;
  height: 100%;
  width: 20%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2)
}  

I wan to add a background for these two divs :

 <div class="detail"> for more info click below</div>
 <div class="read-more"> click</div>  

I can't add a wrapper div , so i'm using overlay Technique:

Demo

How can i relative overlay to parent box ?

Answer 1

i don't know if i got what you want right but here what i think you are trying to do

.box {
    padding:20px;
    border:1px solid #000;
    position:relative;
}

.small {
    width:200px;
    height:200px;
}

.detail{
      position: relative;
}
.box:after{
  content: "";
  display: block;
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.2);
  right:0;
  bottom:0;
    height:100%;
    width:100%;
}

and the html

<div class="box small">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <div class="detail"> for more info click below</div>
     <div class="read-more"> click</div>
</div>

Answer 2

If you don't want to wrap these two div detail and read-more Then try this....

HTML

<div class="box small">
    <p>Pellentesque habitant morbi tristique senectus et netus et             malesuada fames ac turpis egestas.</p>
    <div class="detail"> for more info click below</div>
    <div class="read-more"> click</div>
</div>

CSS

.detail,.read-more
{
      position: relative;
}

.detail:after,.read-more:after{
  content: "";
  display: block;
  position: absolute; 
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2)
}