如何在不使用颜色属性的情况下更改文本的颜色？ (HTML & CSS)答案

【问题标题】：How can I change the colour of my text without using the colour attribute? (HTML & CSS)如何在不使用颜色属性的情况下更改文本的颜色？ (HTML & CSS)
【发布时间】：2016-01-30 02:42:44
【问题描述】：

在我的网站上，我为导航栏使用了可自定义的模板。我想做的是更改文本的下划线颜色而不是更改文本的实际颜色（并且您知道下划线功能和文本必须在同一个选择器中。现在您可能会想，只是做一个垂直的规则并给它上色！问题是，我不知道下划线和一段文字之间的空间量。有没有办法给文字着色与下划线不同的颜色？谢谢！

截图：

代码输入：1
结果：2

【问题讨论】：

在没有任何代码的情况下很难帮助您...
正如您所说，下划线和文本颜色需要匹配，因为它们是相同的（下划线是文本装饰）。您也许可以通过将重复的文本叠加在一起来伪造它，而顶层没有下划线，但现在我们在这样做时会遇到内容和可访问性问题。
链接转到 PNG。
感谢您的建议！ :D -DA
stackoverflow.com/questions/12804419/…

标签： html css text colors underline

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您不能将下划线颜色和文本颜色分开控制；它从文本继承相同的颜色。

但是，您可以改用边框。

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;
}

【讨论】：

【解决方案3】：

使用 inline-block 作为每个链接的显示值并应用底部边框：

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

}

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

【讨论】：

【解决方案4】：

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

ul{
  margin: 0;
  padding: 0;
}
ul li a{
    
    height: 50px;
    position: relative;
    padding: 0px 15px;
    display: table-cell;
    vertical-align: middle;
    background: salmon;
    color: black;
    font-weight: bold;
    text-decoration: none;
}
ul li a:hover:after{
    display: block;
    content: '\0020';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 3.5px;
    background: #000000;
  
    z-index: 9;
}

<ul>
  <li><a href='#'>Menu Item</a></li>
</ul>

【讨论】：

问题是，我想让它动画化。我的模板带有动画。如果我用这个替换我的模板的一部分，模板就不会动画。而且没有办法让它动画化。还是）感谢你的建议！ :-D
我不是要你用这个代替它，我只是给你一个例子。你没有提供代码（好吧，一行）。