JQuery select pseudo-element: after

Question

I want to select a pseudo-element :after

This is my css:

 show-more:after { content : (" > "); } 

JQuery code

 $(function(){ $('.show-more:after').click(function() { alert("Yes"); }); }); 

Answer 1

It is impossible to bind directly to pseudo-elements, since they are not part of the DOM, but the desired effect can be approximated by binding to the parent element and checking for the offset associated with the element that :after acts on:

The following displays as ELEMENT++ , where clicking on "ELEMENT" and "++" each causes a different behavior:

 <span>ELEMENT</span> 

 span::after { content: '++'; position: absolute; } span.c1 { background: yellow; } span.c2::after { background: orange; } 

 const span = document.querySelector('span'); span.addEventListener('click', function (e) { if (e.offsetX > span.offsetWidth) { span.className = 'c2'; } else { span.className = 'c1'; } }); 

Interactive: http://jsfiddle.net/wC2p7/1/

Answer 2

Do something like this:

 $(function(){ $('.show-more').after().click(function() { alert("Yes"); }); }); 

 .show-more { Width: 100px; Height: 40px; Position: relative; /* Helps you define the area you want to be clickable */ Overflow: hidden; } .show-more:after { content: 'Click me'; Left:0; Top: 0; width: 100%; height: 100%; background: red; color: white; padding: 15px; line-height: 40px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="show-more"> </div> 

Answer 3

Change, update

Try

 (function($) { jQuery.fn.extend({ getPseudo: function(pseudo, prop) { var props = window.getComputedStyle( $(this).get(0), pseudo ).getPropertyValue(prop); return String(props); }, setPseudo: function(_pseudo, _prop, newprop) { var elem = $(this); var s = $("style"); var p = elem.getPseudo(_pseudo, _prop); var r = p !== "" ? new RegExp(p) : false; var selector = $.map(elem, function(val, key) { return [val.tagName , val.id ? "#" + val.id : null , val.className ? "." + val.className : null] }); var _setProp = "\n" + selector.join("") .toLowerCase() .concat(_pseudo) .concat("{") .concat(_prop + ":") .concat(newprop + "};"); return ((!!r ? r.test($(s).text()) : r) ? $(s).text(function(index, prop) { return prop.replace(r, newprop) }) : $(s).append(_setProp) ); } }) })(jQuery); 

e.g. starting css :

 .show-more:after { content : ' > '; } 

set pseudo element

 $(".show-more-after").on("click", function() { $(this).setPseudo(":after", "content", "'123'") }) 

github pseudo.js

 (function($) { jQuery.fn.extend({ getPseudo: function(pseudo, prop) { var props = window.getComputedStyle( $(this).get(0), pseudo ).getPropertyValue(prop); return String(props); }, setPseudo: function(_pseudo, _prop, newprop) { var elem = $(this); var s = $("style"); var p = elem.getPseudo(_pseudo, _prop); var r = p !== "" ? new RegExp(p) : false; var selector = $.map(elem, function(val, key) { return [val.tagName , val.id ? "#" + val.id : null , val.className ? "." + val.className : null] }); var _setProp = "\n" + selector.join("") .toLowerCase() .concat(_pseudo) .concat("{") .concat(_prop + ":") .concat(newprop + "};"); return ((!!r ? r.test($(s).text()) : r) ? $(s).text(function(index, prop) { return prop.replace(r, newprop) }) : $(s).append(_setProp) ); } }) })(jQuery); $(".show-more-after").on("click", function() { $(this).setPseudo(":after", "content", "'123'"); }) 

 .show-more-after:after { content : ' > '; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="show-more-after">click</div> 

Answer 4

use this to add text after more detailed

 $(function(){ $('.show-more').text($('.show-more').text()+">"); });