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

Question

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

截图：

代码输入：1
结果：2

Answer 1

一个解决方案是＆＃34;假＆＃34;带底边的下划线。它取决于HTML的结构可能不起作用，但是这样：

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

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

Answer 3

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

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

}

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

Answer 4

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

get()

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