Pseudo :: after适用于某些div，但不会在VC Hero Section标题

Question

我在一个网站上为一个想要边框的客户（他们是PNG图片）工作，他们的标题底部和整个网站上的其他一些div。到目前为止，我有一个CSS类.hh-border-bottom，带有一个伪::after选择器，我用于站点主体中的div，当我把这个类放在行上时效果很好！

但是，该类拒绝在标头的任何位置工作。我已经尝试将它放在部分，行和列上无济于事。我使用Visual Composer作为网站，所以我的标题图像是Hero Section元素，它没有类名的输入。

我甚至尝试为标题(.hh-border-header)开设一个新课程，因为他们的边框图片与身体图片不同，但这也不起作用（不知道为什么我以为会这样。）

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

这是当前div与底部边框的外观，以及标题需要的样子。

CSS：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的VC从后端（只有标题）看起来像什么

编辑：

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看起来的样子（注意：我从我的Page Source中抓取了这个，因为我正在使用Visual Composer;我觉得它有点不稳定）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

当我使用背景颜色时适合我。确保您的背景图片网址正确

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