Jquery using :after selector

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.

CSS has an `:after` selector, but jQuery does not: http://api.jquery.com/category/selectors/ — Blazemonger, Nov 11 '11 at 14:16
[You can't target pseudo-elements using jQuery.](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery) — BoltClock, Nov 11 '11 at 14:36
Psuedo-elements aren't part of the DOM so jQuery is unable to search for them. — George Reith, Oct 11 '12 at 13:55

score 4 · Accepted Answer · edited May 23 '17 at 12:16

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

Gabe · Answer 2 · 2011-11-11T14:31:50.433

2

Make sure your ids are unique.

You only need one $, try

$('#myID').nextAll('li').show();

jsFiddle

edited Nov 11 '11 at 14:31

answered Nov 11 '11 at 14:19

Gabe

49,577
28
142
181

Jquery using :after selector

2 Answers2

Linked