I’m working on a site for a client who wants borders (they are PNG images) on the bottom of their headers and a few other divs throughout the site. So far I have a CSS class .hh-border-bottom with a pseudo ::after selector that I used for the divs in the body of the site that works great when I put the class on the row! However, that class refuses to work anywhere for the header. I’ve tried putting it on the section, row, and column to no avail. I’m using Visual Composer for the site, so my header image is the Hero Section element, which does not have an input for class names. I’ve even tried making a new class for the headers (.hh-border-header) since their border image is different than the body divs, but that doesn’t work either (don’t know why I thought it would).

Any ideas? And if I need to clarify anything, let me know.

This is what the current divs look like with the bottom border, as well as what the headers need to look like.

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

What my VC looks like from the back-end (only the header)

Read more here: Pseudo ::after works for some divs, but won’t on VC Hero Section header


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: