html/css: underline on hover each word of a div, without wrapping

Question

Let's say I have the following div:

<div>aaa, bbb- ccc. eee fff</div>

I was wondering if there is a css trick/property/function to apply a text-decoration: underline to the div 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.

Answer 1

You can split with the space and add span for each and every word. Then u can write text decoration to the span like below:

div:hover span {
  text-decoration: underline;
}