title: Creating a "redacted" / "black-out" style in CSS?
body: <p>I want to create a CSS style that will let my authors write markup like this:</p>
  
  <pre><code>On &lt;span class="redacted"&gt;September, 10 2011&lt;/span&gt; the special operations agent, 
  &lt;span class="redacted"&gt;John Smith&lt;/span&gt;, on orders from his commanding 
  officer, &lt;span class="redacted"&gt;Captain Kirk&lt;/span&gt;, terminated the well known 
  terrorist &lt;span class="redacted"&gt;Fred Flinstone&lt;/span&gt;.
  </code></pre>
  
  <p>I currently have a style like this that does the job in a very simple low-tech way:</p>
  
  <pre><code>span.redacted {
      color: black;
      background-color: black;
  }
  </code></pre>
  
  <p>One requirement is that I <em>want</em> viewers to be able to highlight the text and see the real content "behind".  So just using an image will not work.</p>
  
  <p>Instead of my current scheme of just changing the text &amp; background colors, I want the "black-out" to look like it was really applied by a felt-tip pen. With ragged edges and stuff.  </p>
  
  <p>Any suggestions on how this can be done?  I really want to keep my XHMTL as pure as possible and put as much of this into CSS as I can. </p>
  
  <p>[EDIT: Examples of redacted text]</p>
  
  <p>This Wikipedia article provides several examples of real redacted text.  The first example is really rough (too rough I think).  The second shows an excessive amount of redaction, but you can see that the 'marker' is not straight/clean.</p>
  
  <p><a href="http://en.wikipedia.org/wiki/Sanitization_(classified_information)" rel="noreferrer">http://en.wikipedia.org/wiki/Sanitization_(classified_information)</a></p>
  
  <p>I found this example as well:</p>
  
  <p><a href="http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg" rel="noreferrer">http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg</a></p>