我最近有关Chrome CSS强调问题的文章突出了text-decoration-thickness和text-underline-offset ，功能强大的，广泛支持的CSS属性，可提供更精细的下划线控制。
让我们说明text-decoration-thickness 。 Ubuntu的默认下划线非常厚。我们可以完善它：
：任何链接{
文本命中率：0.08em;
}注意：我使用:any-link而不是<a></a>仅针对实际的超链接（具有href属性的超链接）。浏览器的用户代理样式表也喜欢:any-link 。
许多网站（例如Google Search和Wikipedia）都采用悬停发光，而Underlines仅出现在Mouseover上。尽管通常不适合文本链接，但此方法适合间隔链接（导航，页脚）。这是一个标题示例：
标题：任何链接{
文本介绍：无；
}
标题：任何链接：悬停{
文本描述：下划线；
}但是，悬停的强调将恢复为默认厚度，而忽略了我们先前的text-decoration-thickness设置。为什么？
该问题源于text-decoration是速记属性，而text-decoration-thickness是长期的。将text-decoration为none或underline重置其他文本装饰组件（厚度，样式，颜色）。 CSS文本装饰模块指定以下方式：省略值还原为其初始状态。
浏览器DevTools确认了这一点：检查超链接，扩展text-decoration属性以查看组件值。
为了保留悬停的自定义厚度，我们需要调整。存在几种解决方案：
:hover状态中重新销售text-decoration-thickness 。text-decoration速记。text-decoration-line而不是text-decoration 。text-decoration策略只需在:hover状态下重复text-decoration-thickness ，但它是多余的：
/ *选项A */
标题：任何链接{
文本介绍：无；
}
标题：任何链接：悬停{
文本描述：下划线；
文本命中率：0.08em;
}理想情况下，利用text-decoration的速记功能：
/ *选项B */
标题：任何链接{
文本介绍：无；
}
标题：任何链接：悬停{
文本 - 任务：下划线0.08em;
}注意：这种速记方法相对较新；较旧的CSS版本缺乏此功能。 Safari的Webkit引擎仍然使用前缀-webkit-text-decoration ，并且缺乏厚度支持（请参阅Webkit Bug 230083）。此渲染选项B Safari不兼容。
最佳方法使用text-decoration-line ，与速记旁边介绍：
/ *选项C */
标题：任何链接{
文本统一线：无；
}
标题：任何链接：悬停{
文本统一线：下划线；
}这仅修改line分量，保留先前设置的厚度。这是最坚固，最跨浏览器兼容的解决方案。
请记住：速记属性（例如text-decoration ， background ）重置默认值的值。这解释了为什么background-repeat: no-repeat随后的background: url(flower.jpg)声明。有关更多详细信息，请参见“意外CSS重置”。
以上是何时避免文本剪辑速记属性的详细内容。更多信息请关注PHP中文网其他相关文章！
