html - 使用伪元素覆盖

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)
}  

我想为这两个 div 添加背景:

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

我无法添加包装器 div ，所以我使用覆盖技术:

Demo

我如何相对于父框覆盖？

Answer 1

我不知道我是否得到了你想要的，但我认为这是你想要做的

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

和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>