Question

I’ve created a slide carousel and it uses pseudo element :before to identify the current item you are on, however pseudo element isn’t supported in IE6/7.

Wondering if anyone can think of an alternate solution to have pseudo element working for IE6/7.

Here’s what my page looks like: http://jsfiddle.net/Qcwta/

JavaScript solutions are acceptable as well.

Answer 1

I woudl add an extra element to the dom as follows.

Javascript

for (var i = 0; i < slides.length; i++){
            slideCount += '<li id="slide'+ i+'"><span class="highlight"></span><span>'+(i+1)+'</span></li>' ;
        }

Css

#carousel #slideCount li .highlight {
    display:none;
}

#carousel #slideCount li.current .highlight,
#carousel #slideCount .test {
    border: 5px solid #ccc;
    content: '';
    display: block;
    height: 120px;
    left: -5px;
    position: absolute;
    top: -15px;
    width: 201px;
    z-index: 3;
}