Question

I am currently making a menu and because the menu is an oddshape with a glow around the edge I need to put a blank block over the top to hide the unwanted glow on the overlap. I am creating this using the :after selector on the li tags for the menu and the code to do so works fine.

My problem however is that I can only make it apply to none or all of the menu items at once by toggling the display attribute, what I want however is for the :after selector to only be applied to the current list item.

Each list item has a unique id but I can’t seem to work out how to use the :after selector on a specific list item within jquery.

Thanks in advance for any help. Sorry if this is unclear.

HTML Code

<ul id="menu">
    <li id="0">link 1</li>
<li id="1">link 2</li>
<li id="2">link 3</li>
</ul>

CSS for the list item

#menu li{
float:left;
margin:0 20px 0 0;
height:87px;
z-index:1;
position:relative;
background: #f8f8f8;
cursor:pointer;
border:1px solid #CCC;
border-bottom:none;
}

#menu li:after{
display:none;
content: '';
position: absolute;
top: 0;
bottom: -5px;
left: 0;
width: 291px;
height:10px;
margin-top:109px;
background: #f8f8f8;
}

I thought it would be as simple as putting something like

$$('li[id="0"]:after').show();

or maybe

$$('li[id="1"]:after').css("display" : "block");

but these does not work.

Answer 1

When you handle with :after and :before, you can normally only change the content value by recurring to the data-content property (see for instance this thread)!
However, you can do something more, e.g. you can replace the way the CSS code related to :after and :before is rendered by using a dirty trick.

What I do is to remove the class associated with the :after or :before that I need to change, then I create a new class in the document and I apply it to the target element(s).

I will make an brief example using the so nice CSS3 triangles.
Suppose you have a class arrow-up and that you use :after to print a triangle with css on top of a div. Here follows a CSS.

.div{position:relative;display:block; width:100px; height:50px; border:1px solid black}

.arrow-up:after {
    content:"";
    position:absolute;
    top:-10px;
    left:50%;
    margin-left:-5px;
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;   
border-bottom: 10px solid #333;
}

Here follows a related piece of HTML

<div>My div with centered triangle on top</div>
<div id="toBeMoved" class="arrow-up">My div with centered triangle moved a lot with JQuery</div>

The intent is to put the triangle of the second div at 10% from the top-left corner instead of the default value (at center). Hence, we can use JQuery to remove the old class, append a new customized class to the head and apply the new class with the new :after css code to the div.

var counter = 0;

$.fn.moveTheArrow = function() {

  $(this).removeClass('arrow-up');
  var modclass = 'arrow-up' + (counter++);
  $("<style type='text/css'> ." + modclass + ":after{left:10%;content:'';position:absolute;top:-10px;margin-left:-5px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #333}</style>").appendTo("head");
  $(this).addClass(modclass);

});

Notice that I defined a global counter to address for unique id generator (of course you can follow other ways as well).

Finally, use JQuery to call the function on the target div, e.g.

$(function(){
  $('#toBeMoved').moveTheArrow();
});

Here follows a working JSFiddle