title: How can I use CSS to alter a jQuery-produced class assignment based on whether the link is visited or not?
body: <p>We are using a regular expression to determine if a link is to an internal or external page. If the link is to an external page, a class is assigned which affixes an external page icon to the link.  Here is the regex:</p>
  
  <pre><code>//Identify external links
  jQuery("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
  .addClass("external");
  //Append span to display Icon
  jQuery('#content1 a.external').append('&lt;span class="external_link" /&gt;'); 
  </code></pre>
  
  <p>Can I use my CSS to change the icon that is applied according to whether or not the link in question has been visited? [i.e., the external link icon is a different color if the link has been visited, just like the link itself behaves] </p>
  
  <p>I don't really think it can be done in CSS.  My reasoning is that the jQuery assigns the class based on what kind of link it is, regardless of whether or not the link has been visited. So there's no way to assign a pseudo-class :visited to the span class that was created by the jQuery regular expression.</p>
  
  <p>But maybe someone knows a neat CSS trick that I'm not thinking of-- admittedly not hard to do at all.</p>
  
  <p>My CSS for the non-visited icon (it's a sprite):</p>
  
  <pre><code>span.external_link { 
  background: url(/hslc/global/icons/icon-external.gif) no-repeat scroll left top transparent; 
  display: inline-block; 
  height: 10px; 
  line-height: 16px; 
  margin: 0 0 0 0.25em; 
  padding: 0; width: 10px; }
  </code></pre>
  
  <p>CSS for the visited version of the icon, which does <em>not</em> work:</p>
  
  <pre><code>a:visited span.external_link { background-position: 0 -100px }
  </code></pre>
  
  <p>This page contains an example if you'd like to see one. The link directly under the video shows an external link icon doin' its thing...  <a href="http://eclkc.ohs.acf.hhs.gov/hslc/tta-system/teaching/center/practice/ISS/zone.html" rel="nofollow">http://eclkc.ohs.acf.hhs.gov/hslc/tta-system/teaching/center/practice/ISS/zone.html</a> </p>
  
  <p>Thanks!</p>
  
  <p>Using BoltClock's link in the comments, I found that background image can't be used to style visited links anymore. Color can be used.  So I used the Baron's solution below, and X + Y selector to write this:</p>
  
  <pre><code>span.external_link::after  { 
  content:    "&lt;- unvisited!"; 
  color:      green; }  
  
  a:visited + span.external_link::after {  
  content:    "&lt;- visited!"; 
  color:      red; }
  </code></pre>
  
  <p>I am only getting green/unvisited text. I can't get red/visited to show up</p>
  
  <p>I made a fiddle of this exact CSS. Can anyone point out where I'm going wrong?  I can never get red/visited to apply.
  <a href="http://jsfiddle.net/Lera/zLyMn/4/" rel="nofollow">http://jsfiddle.net/Lera/zLyMn/4/</a></p>