Add text to a pseudo element on the second click of the same div

Question

I have a very basic function that shows the :after of a div onclick by adding a class to it.

All I want to achieve is that, from the second click on, the :after would change from "THIS" to "AND THIS"

Any hint?
Thanks!

$(document).on("click","#click",function(){$("#logo").addClass("open")});

#click{cursor:pointer}
#logo.open:after{content:" THIS"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">CLICK HERE</div><br>
<div id="logo">SHOT</div>

You can't manipulate the content of a pseudo element directly, but you can have the content reference a data attribute instead, then manipulate that: https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Jeremy, Jul 14 '17 at 22:14

score 3 · Accepted Answer · answered Jul 14 '17 at 22:20

You can check to see if the element has .open, and if so, add a new class that overwrites the ::after content

var $logo = $('#logo');
$(document).on("click","#click",function(){
  if ($logo.hasClass('open')) {
    $logo.addClass('and');
  } else {
    $logo.addClass('open');
  }
});

#click{cursor:pointer}
#logo.open::after{content:" THIS"}
#logo.and::after{content:" AND THIS"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">CLICK HERE</div><br>
<div id="logo">SHOT</div>

Add text to a pseudo element on the second click of the same div

1 Answers1