jQuery fadeIn and fadeOut affecting :before elements set with CSS

On this test page:

The big, centered text is marked up like this:

<div class="hometext">
	<h3>We Provide</h3>
	<h2>We chart a financial course that reflects your family,<br />
		career, retirement plans, charitable aspirations<br />
		and much more.</h2>

Open in new window

To make a wide, separated double-line effect, I used a CSS ":after" selector to add a second border to the H1 element:

h1:after{content:' ';
border-bottom:1px solid rgba(255,255,255,0.5);}

Open in new window

I used that same technique in a few other places throughout the site, and it seems to work nicely. However, on the home page, there is also some fadeIn and fadeOut animation happening:

function homeAnimation(){
	$('div.hometext:nth-child('+curImg+')').fadeOut(1000, function(){
		$('div#homebg img:nth-child('+curImg+')').fadeOut(1000);

		if (curImg===maxImg){curImg=1;} else {curImg++;}

		$('div#homebg img:nth-child('+curImg+')').fadeIn(800, function(){

Open in new window

When the page initially loads (and the content fades in), the double-line looks great, but once the animation is complete, my ":after" element disappears for some reason. This seems to happen in the Firefox browser (Safari and Chrome are OK so far). Is there something about that element that a jQuery animation would not like? Wondering if anyone else has seen this happen.

Other, static pages have the same effect that works without a problem, such as:

Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

your page doesn't work, 404 error, page not found
Get rid of the after and amend your border-bottom to

6px double rgba(255, 255, 255, 0.5)

Sometimes it's the simple things
You might wanna add a little text-shadow to your tag lines just to make them stand out a little better - something like

text-shadow: 1px 2px 0 black;
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Brad BansnerWeb DeveloperAuthor Commented:
I was unable to get the lines to look the way the design agency wanted using "double" on a border. They wanted more space between the two lines.
Remove the z-index from the :after class

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brad BansnerWeb DeveloperAuthor Commented:
Ah, that seems to have fixed it. I added z-index based on this article:

This is their explanation:

"This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value."

But I don't see any real issue in the website, now that I have removed them all.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.