html / css:悬停div的每个单词时加下划线,不换行[重复]
Posted
技术标签:
【中文标题】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;
【讨论】:
他说:我知道我可以通过将每个单词包装在一个跨度中来做到这一点,以上是关于html / css:悬停div的每个单词时加下划线,不换行[重复]的主要内容,如果未能解决你的问题,请参考以下文章