title: Only the last CSS ::after selector works with jQuery .addClass
body: <p>In a multilingual website there is a simple jQuery .click event that adds a class on the search button.</p>
  
  <p>The class "load_IT" is added on the Italian website and the class "load_EN" is added to the English website.</p>
  
  <p><strong>Italian version:</strong></p>
  
  <pre><code>$("#doSearch").click(function() {
    $("#doSearch").last().addClass("load_IT");
  });
  </code></pre>
  
  <p><strong>English version:</strong></p>
  
  <pre><code>$("#doSearch").click(function() {
    $("#doSearch").last().addClass( "load_EN" );
  });
  </code></pre>
  
  <p>Everything seems to work fine with jQuery, the class is successfully added on both versions of the website.</p>
  
  <p>Both of these classes have a simple CSS ::after selector like the example (the .css file is the same for both websites):</p>
  
  <pre><code>.load_IT::after {
      content: 'Caricamento...';
      -o-animation: bookingBlink 1s linear infinite;
      -ms-animation: bookingBlink 1s linear infinite;
      -moz-animation: bookingBlink 1s linear infinite;
      -webkit-animation: bookingBlink 1s linear infinite;
      top: 8px;
  }
  
  .load_EN::after {
      content: 'Loading...';
      -o-animation: bookingBlink 1s linear infinite;
      -ms-animation: bookingBlink 1s linear infinite;
      -moz-animation: bookingBlink 1s linear infinite;
      -webkit-animation: bookingBlink 1s linear infinite;
      top: 8px;
  }
  
  @keyframes bookingBlink {
      0%,
      100% {
          opacity: 1
      }
  
      50% {
          opacity: .3
      }
  }
  
  @-webkit-keyframes bookingBlink {
      0%,
      100% {
          opacity: 1
      }
  
      50% {
          opacity: .3
      }
  }
  </code></pre>
  
  <p>The problem now is that the only last one works.</p>
  
  <p>If in the CSS file I first write the "load_IT" class and then "load_EN" class, only the last one will work (load_EN) and everything is fine in the English website.</p>
  
  <p>If in the CSS file I first write the "load_EN" class and then "load_IT" class, only the last one will work (load_IT) and everything is fine in the Italian website.</p>
  
  <p>That's strange, why does this happen?</p>
  
  <ul>
  <li><strong>Already tried:</strong>
  
  <ul>
  <li>Switch the order of classes.</li>
  <li>Put one of the class at the top of CSS and the other one at the bottom.</li>
  <li>Change completely the classes name.</li>
  <li>Remove the animations.</li>
  <li>Use :after (CSS2) and ::after(CSS3)</li>
  <li>Use ::before on one class and ::after on the other class.</li>
  </ul></li>
  </ul>
  
  <p>To understand better what's happening I have also tried to add the classes to the button directly in the html. Unfortunately, the problem is the same and I assume that is not a jQuery problem.</p>
  
  <p><strong>JSFiddle example</strong></p>
  
  <p><a href="https://jsfiddle.net/e3dc6o48/3/" rel="nofollow noreferrer">https://jsfiddle.net/e3dc6o48/3/</a></p>
  
  <p>In JSFiddle it works, it's clear that the problem is somewhere in my code. Where can be the issue? In CSS or in the HTML file?</p>