javascript - Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery -
is there way select/manipulate css pseudo-elements such ::before , ::after (and old version 1 semi-colon) using jquery?
for example, stylesheet has following rule:
.span::after{ content:'foo' }   how can change 'foo' 'bar' using jquery?
you pass content pseudo element data attribute , use jquery manipulate that:
in html:
<span>foo</span>   in jquery:
$('span').hover(function(){     $(this).attr('data-content','bar'); });   in css:
span:after {     content: attr(data-content) ' other text may want'; }   if want prevent 'other text' showing up, combine seucolega's solution this:
in html:
<span>foo</span>   in jquery:
$('span').hover(function(){     $(this).addclass('change').attr('data-content','bar'); });   in css:
span.change:after {     content: attr(data-content) ' other text may want'; }      
Comments
Post a Comment