last-child() and :after not working in IE 8

Question

Question by Kamal

Hello friends following is my code

HTML

<ul class="menu-item">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

CSS

.clear-right{
color:red;
}
.menu-item:last-child{
    color:red;}
.menu-item:last-child:after
    {
content:'hi';
}

my code is working perfectly in all browser but not working in IE m trying to do same thng using jquery

$(".menu-item li:last-child:after").css('content','"hi"');

you can check demo here
but its also not working please help me

Thanks in advance

Answer 1

:after and :before are pseudo elements, which cannot be manipulated afterwards. So you can’t do this.

An alternate possible selector would be this

$(".menu-item li").last().css('content', 'hi');

One trick to solve it is.

Create a class with your needed CSS

.newClass {}
.newClass:after { content: 'hi'; }

Now using jQuery switch them.

$(".menu-item li").last().addClass("newClass");