Splitting the string of an XML node for separate SPAN

I would like to split a string on a "." (period) character
using pure XSLT. For instance, if the node were...

<foo>abc.def
  <bar>xyz</bar>
</foo>

<span class="black">abc</span>.
<span class="red">def
  <span class="blue">xyz</span>
</span>

I would like to avoid breaking up <foo> into
two nodes <black> and <red>. It is only a display
issue for readiblilty. For sorting and all
the "abc.def" are as one. It would be nice to
keep them as one in a single tag.

 <(+)__       Gan Uesli Starling
  ((__/)=-    Kalamazoo, MI, USA
   `||`
    ++        http://starling.us