jQuery fadeIn and fadeOut affecting :before elements set with CSS

Posted on 2014-08-25
Last Modified: 2014-08-26
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:

Question by:bbdesign
    LVL 81

    Expert Comment

    your page doesn't work, 404 error, page not found
    LVL 58

    Expert Comment

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

    Expert Comment

    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;

    Author Comment

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

    Accepted Solution

    Remove the z-index from the :after class

    Author Comment

    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.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now