使用伪元素叠加

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，所以我使用覆盖技术:

演示

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>

Answer 2

如果你不想换行这两个div detail和read-more然后试试这个....

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