How to use different colors in the same HTML link?

Question

I'm trying to use different colors in the same HTML link. It seems to work at first, but when I hover over the link with the mouse, the underline is drawn with only a single color.

I'm using this HTML as 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;
}

a:hover .tag {
  text-decoration: none !important;
  /* doesn't work */
}

This is some text: <a href="https://www.example.com"><span class="tag">[this is a tag] </span>This is a link, the tag being part of the link</a>

You can play with it on JSFiddle.

As you can see there, the underline is blue, even under the yellow words. How can I style the hovering links to display a yellow underline (or even no line) under the yellow part?

See also [Multiple underline colors in one anchor](https://stackoverflow.com/q/38481240/215552) — Heretic Monkey, Jul 16 '21 at 15:27
Or you can use [text-decoration-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) for your span — Sfili_81, Jul 16 '21 at 15:28
@Sfili_81 please, don't forget to follow your advice with browser support stats in case it's [not supported but all major browsers](https://caniuse.com/text-decoration) out of the box — Vladislav Akhmetvaliyev, Jul 16 '21 at 15:42

Vladislav Akhmetvaliyev · Accepted Answer · 2021-07-16T15:35:02.837

Your code part for a:hover .tag works fine and is rendered correctly, but there is an underline on the link on its own. So you need to remove the underline on the link and add it only to part with text.

body {
  background: #E7CEAF;
}

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

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

.tag {
  font-style: italic;
  color: yellow;
}

a:hover .tag {
  text-decoration: underline;
}

a:hover .text {
  text-decoration: underline;
}

This is some text: <a href="https://www.example.com">
<span class="tag">[this is a tag] </span>
<span class="text">This is a link, the tag being part of the link</span></a>

How to use different colors in the same HTML link?

1 Answers1