如何在不使用颜色属性的情况下更改文本的颜色？（HTML和CSS）

在我的网站上，我为我的导航栏使用了一个可定制的模板。我想做的事情是改变文本的下划线颜色，而不是改变文本的实际颜色（正如你所知，下划线功能和文本必须在同一个选择器中。现在你可能会想，只需制定一条垂直规则并给它上色！问题是，我不知道下划线和文本之间的空间大小。有没有办法给文本上色，使其与下划线的颜色不同？谢谢

截图：

代码输入：
结果：

一种解决方案是使用底部边框“伪造”下划线。根据HTML的结构，这可能不起作用，但类似于：

text-decoration: none;
border-bottom: 1px solid #FF0000;

---

您不能隔离下划线颜色并将其与文本颜色分开控制；它会从文本中继承相同的颜色

但是，您可以使用border

nav a {
    color: white
    text-decoration: none;
    border-bottom: 1px solid salmon;
    background-color: salmon;
}

nav a.active {
    color: #333;
    border-bottom: 1px solid #333;
}

---

使用内联块作为每个链接的显示值，并应用底部边框：

ul li a{
  display:inline-block;
  border-bottom:2px solid #eeeeee;
  float:left;
  padding: 10px;
  background-color:red;
  color:#ffffff;
  text-decoration:none;

}

---

根据您的风格更改填充、背景色和字体颜色。

这是另一种解决方案。将鼠标放在元素上

ul{
保证金：0；
填充：0；
}
ullia{
高度：50px；
位置：相对位置；
填充：0px 15px；
显示：表格单元格；
垂直对齐：中间对齐；
背景：鲑鱼；
颜色：黑色；
字体大小：粗体；
文字装饰：无；
}
ul li a：悬停：之后{
显示：块；
内容：'\0020'；
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
高度：3.5px；
背景：#000000；
z指数：9；
}

如果没有任何代码，就很难帮助您解决问题……正如您所说，下划线和文本颜色需要匹配，因为它们是一种相同的颜色（下划线是文本装饰）。你也许可以通过将重复文本层叠在一起来伪装它，顶层没有下划线，但现在我们在做这件事的时候弄乱了内容和可访问性问题。链接指向PNG。不过谢谢你的建议！：D-dat事情是，我想让它动画化。我的模板附带动画。如果我要替换pa我的模板的rt有了这个，模板就不会有动画。而且也没有办法让它有动画。不过谢谢你的建议！：-我不是要你用这个替换它，我只是给你一个例子。你没有提供代码（嗯，一行）。