Highlight background (stackoverflow)

HTML

<span id="test">The word "fractal" often has different connotations for laypeople than mathematicians, where the layperson is more likely to be familiar with fractal art than a mathematical conception. The mathematical concept is difficult to formally define even for mathematicians, but key features can be understood with little mathematical background.</span>

CSS

span
{
    text-align:justify;
}

JavaScript

$(document).ready(function(){
  
  var seconds = 7;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<div>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  });
  var background = $('<div>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  });
  wrapper.append(background);
  wrapper.append(el.css('position','absolute'));
  $('body').append(wrapper);
  background.animate({width: '+=' + width},1000*seconds);

});