理解 uk-button-text 及其下划线行为
UIkit 的 uk-button-text 类通常用于创建纯文本样式的按钮，其默认情况下可能不带下划线。如果您的按钮显示下划线，这通常是由于：
- 浏览器默认行为： 某些浏览器对 标签（即使在按钮内部）会添加下划线，但对于
- 自定义 CSS： 您可能在项目的其他地方应用了 text-decoration: underline; 样式。
- UIkit 其他组件或主题： 某些 UIkit 主题或特定组件的组合可能导致下划线出现。
当您尝试通过 color 属性改变按钮文本颜色时，如下所示：
.escolha-resultado-pesquisa:hover {
color: rgba(154, 217, 163, 1); /* 悬停时文本变为绿色 */
}
对应的 HTML 结构：
<button class="uk-button uk-button-text escolha-resultado-pesquisa">RESULTADOS DA PESQUISA</button>
您会发现文本颜色成功改变，但下划线颜色却保持不变。这是因为 color 属性只影响文本本身，而下划线（通常由 text-decoration 或 border-bottom 实现）的颜色由其他属性控制。
解决方案一：使用 text-decoration-color (推荐)
如果您的下划线是通过 CSS text-decoration: underline; 实现的，那么最直接且语义化的方法是使用 text-decoration-color 属性来控制其颜色。
首先，确保您的按钮具有下划线。如果 UIkit 默认没有，您需要手动添加：
.escolha-resultado-pesquisa {
text-decoration: underline; /* 确保有下划线 */
text-decoration-color: currentColor; /* 默认下划线颜色与文本颜色一致 */
/* 其他默认样式 */
}
.escolha-resultado-pesquisa:hover {
color: rgba(154, 217, 163, 1); /* 悬停时文本颜色 */
/* 此时，由于 text-decoration-color: currentColor; 下划线颜色将自动跟随文本颜色 */
/* 如果需要与文本颜色不同的下划线颜色，可以直接指定： */
/* text-decoration-color: #ff0000; */
}
代码解释：
- text-decoration: underline;：明确为按钮添加下划线。
- text-decoration-color: currentColor;：这是一个非常有用的关键字，它将下划线的颜色设置为与当前元素的 color 属性值相同。这意味着当 color 属性在悬停时改变，text-decoration-color 也会随之自动更新，实现下划线与文本颜色同步变化的效果。
- 如果您希望下划线在悬停时具有与文本不同的颜色，可以直接在 :hover 伪类中指定 text-decoration-color 为您想要的具体颜色值。
解决方案二：使用 border-bottom 模拟下划线
border-bottom 是一种更灵活的模拟下划线的方法，它允许您更好地控制下划线的粗细、样式和与文本的距离。
.escolha-resultado-pesquisa {
text-decoration: none; /* 移除可能存在的默认 text-decoration 下划线 */
border-bottom: 2px solid currentColor; /* 初始下划线，颜色与文本一致 */
padding-bottom: 2px; /* 调整下划线与文本的距离 */
transition: border-color 0.3s ease, color 0.3s ease; /* 添加过渡效果，使变化更平滑 */
}
.escolha-resultado-pesquisa:hover {
color: rgba(154, 217, 163, 1); /* 悬停时文本颜色 */
border-color: rgba(154, 217, 163, 1); /* 悬停时下划线颜色与文本颜色一致 */
/* 如果需要不同的下划线颜色，可以直接指定： */
/* border-color: #ff0000; */
}
代码解释：
- text-decoration: none;：确保不会有双重下划线，或者避免默认的 text-decoration 干扰。
- border-bottom: 2px solid currentColor;：创建一个 2 像素粗的实线下划线，其颜色初始时与文本颜色相同。
- padding-bottom: 2px;：在文本和下划线之间添加一些间距，提高可读性。
- transition: border-color 0.3s ease, color 0.3s ease;：为颜色变化添加平滑的过渡效果，提升用户体验。
- 在 :hover 状态下，同时修改 color 和 border-color 即可实现文本和下划线颜色的同步变化。
解决方案三：改变背景色 (原答案的思路)
原始问题提供的答案建议改变背景色。虽然这不是改变下划线颜色，但它提供了一种有效的视觉反馈方式，可以作为下划线效果的补充或替代。
.escolha-resultado-pesquisa:hover {
color: rgba(154, 217, 163, 1); /* 文本颜色 */
background-color: rgba(154, 217, 163, 0.1); /* 悬停时添加淡绿色背景 */
/* 注意：这不会改变下划线颜色，只是提供另一种视觉反馈 */
}
代码解释：
- 通过调整 background-color 可以在按钮悬停时提供一个背景高亮效果。
- 使用 rgba 可以设置透明度，使背景色不至于太突兀。
- 这种方法可以与上述下划线颜色改变的方法结合使用，提供更丰富的悬停效果。
注意事项
-
CSS 特异性 (Specificity)： 您的自定义 CSS 规则可能需要足够的特异性来覆盖 UIkit 默认的样式。如果您的样式不生效，尝试增加选择器的特异性，例如使用更具体的类名组合或父级选择器。
/* 增加特异性示例 */ .container-resultados-busca .escolha-resultado-pesquisa:hover { color: rgba(154, 217, 163, 1); text-decoration-color: rgba(154, 217, 163, 1); } - !important 的使用： 尽量避免使用 !important，因为它会破坏 CSS 的层叠性，使后续样式修改变得困难。只有在万不得已，且确认没有其他方法可以覆盖样式时才考虑使用。
- 用户体验与可访问性： 确保悬停状态的颜色变化具有足够的对比度，以便所有用户（包括有视觉障碍的用户）都能清晰识别。
- UIkit 版本差异： 不同的 UIkit 版本可能对组件的默认样式有细微调整，如果遇到问题，请查阅您所使用版本的 UIkit 文档。
总结
自定义 UIkit uk-button-text 悬停时的下划线颜色，关键在于理解 color 属性与下划线样式属性（如 text-decoration-color 或 border-bottom）之间的区别。通过 text-decoration-color: currentColor; 可以最简洁地实现下划线与文本颜色同步变化。而 border-bottom 方案则提供了更高的灵活性，允许您精确控制下划线的样式和位置。结合背景色变化，可以为用户提供更丰富的视觉反馈，从而提升整体的用户体验。在实施过程中，请务必注意 CSS 特异性，并确保样式调整符合可访问性标准。
