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

Posted 2023-03-04

【中文标题】html / css：悬停div的每个单词时加下划线，不换行[重复]

【英文标题】：html/css: underline on hover each word of a div, without wrapping [duplicate]

【发布时间】：2019-06-04 00:01:37

【问题描述】：

假设我有以下 div：

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

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

【问题讨论】：

在span 中包装这个词没有发现任何效率问题。做一些 CSS 技巧（假设它存在于您的案例中）它可能会在某些浏览器版本中引起一些问题。我会说在这里玩安全。使用 span 标签进行样式设置没有错

***.com/a/5688758/5385381

【参考方案1】：

您可以用空格分割并为每个单词添加跨度。然后你可以像下面这样将文本装饰写入跨度：

div:hover span 
  text-decoration: underline;

【讨论】：

他说：我知道我可以通过将每个单词包装在一个跨度中来做到这一点，