如何在同一HTML链接中使用多颜色并修复hover下划线单色问题

问题根源 #

text-decoration是设置在父级<a>标签上的属性，子元素的text-decoration: none无法清除父元素生成的下划线，这是CSS的既定规范，所以你之前加的!important规则不会生效。

以下是两种符合需求的实现方案： #

方案1：黄色标签部分不显示下划线

给.tag添加display: inline-block属性即可脱离父元素下划线的影响，无需修改原有HTML结构，修改后的CSS如下：

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: underline;
}

.tag {
  font-style: italic;
  color: yellow;
  /* 新增以下属性即可 */
  display: inline-block;
  /* 如果出现标签与文本错位的情况，可再加以下对齐属性 */
  vertical-align: baseline;
}

hover时只有白色/浅蓝色的链接文本会显示下划线，黄色标签部分无下划线。 #

方案2：黄色标签部分显示黄色下划线

在方案1的基础上，给hover状态的.tag单独加下划线即可，当前元素的下划线默认和文字颜色一致，会自动显示为黄色：

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: underline;
}

.tag {
  font-style: italic;
  color: yellow;
  display: inline-block;
  vertical-align: baseline;
}

/* 新增hover状态下的tag下划线设置 */
a:hover .tag {
  text-decoration: underline;
}

如果需要单独指定下划线颜色，也可以显式设置text-decoration-color: yellow，效果完全一致。

内容的提问来源于stack exchange，提问作者Stamm