Highlighting Text Around Each Character

jquery.text_highlight.js

// This entire file is optional. May be useful if using with a CMS where your users are
// entering in paragraphs, and you always want to highlight their paragraph text by default

$('p').wrapInner('<span class="highlight"></span>');

text_highlight.css

span.highlight {
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0.2em 0 0 rgba(0, 0, 0, .5),-0.2em 0 0 rgba(0, 0, 0, .5);
  -moz-box-shadow: 0.2em 0 0 rgba(0, 0, 0, .5),-0.2em 0 0 rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0.3em 0 0 rgba(0, 0, 0, .5),-0.3em 0 0 rgba(0, 0, 0, .5);
}

/* 
  Optional: This gives IE8 translucent background support, but adds 2 translucent layers in IE9.
  Does not affect IE10+. Your call.
*/
p {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
}

text_highlight.html

<p>
  <span class="highlight">
    Let's assume this text is multiline.
    Each line will highlight exactly to the end of the line,
    and not like a big block
  </span>
</p>