html/css: underline on hover each word of a div, without wrapping : <p>Let's say I have the following div:</p>

<pre><code>&lt;div&gt;aaa, bbb- ccc. eee fff&lt;/div&gt;
</code></pre>

<p>I was wondering if there is a css trick/property/function to apply a <code>text-decoration: underline</code> to the <code>div</code> on hover and have the underline appear only in the word where the cursor is? I know I can do it by wrapping each word in a span, but that doesn't seem very efficient.</p>
