伪 ::after 适用于某些 div，但不会用于 VC 英雄部分 header

Question

我正在为一个客户开发网站，该客户希望在其 header 的底部添加边框（它们是 PNG 图像），并在整个网站中添加一些其他 div。到目前为止，我有一个 CSS class .hh-border-bottom 和一个伪 ::after 选择器，我用于网站 body 中的 div，当我将 class 放在行上！

但是，class 拒绝在任何地方为 header 工作。我试过把它放在节、行和列上都无济于事。我在网站上使用 Visual Composer，所以我的 header 图像是 Hero Section 元素，它没有 class 名称的输入。

我什至尝试为 headers (.hh-border-header) 制作一个新的 class，因为它们的边框图像与 body div 不同，但事实并非如此也不行（不知道为什么我认为它会）。

有什么想法吗？如果我需要澄清任何事情，请告诉我。

这是当前带有底部边框的 div 的样子，也是 headers 需要的样子。

CSS:

.hh-border-header{
  position: relative;
  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
}

.hh-border-header::after {
  height: 177px;
  width: 100%;
  z-index: -1;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-position: center;
  bottom: -3px;
  content:" ";
  display: block;
  position: absolute;
}

我的 VC 在 back-end 中的样子（仅 header）

编辑：

Pete gave me another idea to try. Makes sense why the ::after might not work on a Hero element, so I changed it so that my header image is a background image on the row, then put text and some empty space inside the row like:

这就是我的 HTML 的样子（注意：由于我正在使用 Visual Composer，所以我从我的页面源代码中抓取了这个；我认为它有点不稳定）

<div id="page-content" class="header-style-default page-with-vc">

<div class="page-holder page-layout-fullwidth">

<section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill">
  <div data-vc-full-width="true" data-vc-full-width-init="false" 
  data-vc-stretch-content="true" 
  class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
  vc_row-has-fill vc_row-no-padding">

  <div class="hh-border-header wpb_column vc_column_container 
  vc_col-sm-12 vc_col-has-fill">

  <div class="vc_column-inner vc_custom_1494950070267">

    <div class="wpb_wrapper">

      <div class="vc_empty_space" style="height: 250px" >

        <span class="vc_empty_space_inner">
        </span>
      </div>

<div class="wpb_text_column wpb_content_element  ">
  <div class="wpb_wrapper">
    <h1 style="text-align: center;">Overnight Camps</h1>

  </div>
</div>
<div class="vc_empty_space  hh-border-header"   style="height: 250px" >
  <span class="vc_empty_space_inner"></span>
</div>
</div>
</div>
</div></div>
<div class="vc_row-full-width"></div>
</section>

Answer 1

当我使用背景颜色时对我有用。确保您的背景图片 url 正确

.hh-border-header {
  display: block;
  position: relative;
  z-index: 2;
  height: 500px;
  width: 500px;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-color: green;
}

.hh-border-header::after {
  height: 177px;
  width: 100%;
  z-index: 5;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-color: red;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-position: center;
  bottom: -3px;
  content: " ";
  display: block;
  position: absolute;
}

<div id="page-content" class="header-style-default page-with-vc">

  <div class="page-holder page-layout-fullwidth">

    <section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill">
      <div data-vc-full-width="true" data-vc-full-width-init="false" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
  vc_row-has-fill vc_row-no-padding">

        <div class="hh-border-header wpb_column vc_column_container 
  vc_col-sm-12 vc_col-has-fill">

          <div class="vc_column-inner vc_custom_1494950070267">

            <div class="wpb_wrapper">

              <div class="vc_empty_space" style="height: 250px">

                <span class="vc_empty_space_inner">
        </span>
              </div>

              <div class="wpb_text_column wpb_content_element  ">
                <div class="wpb_wrapper">
                  <h1 style="text-align: center;">Overnight Camps</h1>

                </div>
              </div>
              <div class="vc_empty_space  hh-border-header" style="height: 250px">
                <span class="vc_empty_space_inner"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="vc_row-full-width"></div>
    </section>

伪 ::after 适用于某些 div，但不会用于 VC 英雄部分 header

Pseudo ::after works for some divs, but won't on VC Hero Section header

html

css

wordpress

visual-composer