html - css 媒体查询不适用于 :before attribute

Question

我正在尝试在平板设备上应用媒体查询，除了我必须降低高度的 before 属性外，媒体查询中的所有内容都在工作，这是我的 CSS 代码

@media screen and (max-width: 767px) {
  .img-overlay:before {
  content: ' ';
  display: block;
  height:   5% !important;
  }
}

这是我的HTML

<div class="img-wrapper headerimage">
   <img src="images/banner.jpg" alt="Start Learning With Hifzil" class="img-responsive" >
   <div class="img-overlay align-middle">
      <h1 class="headingBox text-center">Start Learning With Hifzil</h1>
      <h4 class="smallBox text-center">Join Now, Enrolled In Class , Play & Learn</h4>
      <div class="mx-auto d-block btnBox">
         <button class="btn valign">Students, start now</button>
         <button class="btn valign" style="background: #fff;color:#7952b3">Teachers, start now</button>
         <button class="btn valign" style="background: #fff;color:#7952b3">Administration Panel</button>
      </div>
   </div>
</div>

Answer 1

问题是您以百分比设置高度。例如 5% 是什么？ img-overlay div 有指定的高度？如果不是，则 5% 为空，结果为空。

在 img-overlay div 上设置指定的高度，它将起作用。见下文(我添加了 height:100px )

或者你可以使用一个不是百分比的高度

 .img-overlay {
   height: 100px
 }
 
 .img-overlay:before {
   content: '';
   display: block;
   height: 15% !important;
   background: red;
   width: 100px;
 }
 
 @media screen and (max-width: 767px) {
   .img-overlay:before {
     height: 5% !important;
   }
 }

<div class="img-wrapper headerimage">
  <img src="images/banner.jpg" alt="Start Learning With Hifzil" class="img-responsive">
  <div class="img-overlay align-middle">
    <h1 class="headingBox text-center">Start Learning With Hifzil</h1>
    <h4 class="smallBox text-center">Join Now, Enrolled In Class , Play & Learn</h4>
    <div class="mx-auto d-block btnBox">
      <button class="btn valign">Students, start now</button>
      <button class="btn valign" style="background: #fff;color:#7952b3">Teachers, start now</button>
      <button class="btn valign" style="background: #fff;color:#7952b3">Administration Panel</button>
    </div>

  </div>
</div>