html - html / css：悬停div的每个单词时加下划线，不换行

Question

假设我有以下 div：

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

我想知道是否有一个css技巧/属性/函数可以将atext-decoration: underline应用于div悬停并且下划线仅出现在光标所在的单词中？我知道我可以通过将每个单词包装在一个跨度中来做到这一点，但这似乎不是很有效。

标签： htmlcss

Answer 1

您可以使用空格拆分并为每个单词添加跨度。然后您可以将文本装饰写入跨度，如下所示：

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