I’ve been having the damnedest time getting my ::after pseudo element to work. I posted a thread here a couple days ago when my ::after wasn’t working when trying to position a bottom border on my header div (it has a background image set, but it’s not an image element) and it somehow magically started working. Since I imported my custom fonts to my site via @font-face, they quit working and won’t work even if my @font-face is commented out. Now I can’t get it to work unless my position is set to fixed, which does not solve my problem because it fixes to the bottom of my browser window! I’ve played around with everything from the z-index positioning to various display settings and position settings. I have no clue what I’m doing wrong because my code looks correct with everything I’ve been reading.

Here’s my current CSS and HTML I grabbed from my Page Source via Chrome Dev tools with the position:fixed; that makes my border show up:

.hh-border-header {
  position: relative;
  top:0;
  background-color: red;
  left:0;
  display: block;
  width:100%;
  height:100%;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  z-index: 100000;
}
.hh-border-header:after{

  position: absolute;
  top:0;
  left:0;
  background-color: green;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
}
<section id="header" class="vc_section vc_custom_1495133084752 vc_section-has-fill">
<div id="outdoor-header" 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 hh-donate-button vc_custom_1495133093093 vc_row-has-fill vc_row-no-padding">
<div class="wpb_column vc_column_container vc_col-sm-12 vc_col-has-fill">
<div class="vc_column-inner vc_custom_1495131494343">
<div class="wpb_wrapper">
<div class="vc_empty_space  vc_custom_1495114669451"   style="height: 250px" >
<span class="vc_empty_space_inner">
</span>
</div>

	<div class="wpb_text_column wpb_content_element  ">
		<div class="wpb_wrapper">
			<h6 class="white-text" style="text-align: center;">Outdoor Education</h6>

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

I have coding in Sass as well and uploading my compiled CSS file to my development server, so maybe that makes a difference? Maybe it’s something with Visual Composer?

I’ll try to respond to any questions with as much detail as possible.

Note: Yes, the links to my background images are correct, but I have changed the name of my company to “mywebsite” and the subdomain of my client to “dev” due to posting the questions on here. I added background colors because that’s what a couple of the helpful StackOverflow members did on my last question.

Thanks in advance!

Read more here: ::after pseudo element only workes if position: fixed


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: