html - 如何不在链接中的元素下划线？

Question

除了#myspan 元素外，我试图在链接上加下划线，在任何情况下我都不想加下划线。我还想更改#myspan 的颜色。这些规则似乎不适用于它。如果我颠倒顺序而不是在“a”下划线但在#myspan 下划线，它似乎适用于规则。我看过Text decoration for link and span inside this link无济于事。

    a {
      text-decoration: underline;
    }
    
    a #myspan {
      color: black;
      text-decoration: none;
    }
    
    a:active #myspan {
      color: grey;
      text-decoration: none;
    }
    
    a:visited #myspan {
      color: yellow;
      text-decoration: none;
    }
    
    a:hover #myspan {
      color: red;
      text-decoration: none;
    }

  <a href="#">A link <span id="myspan">some additional information</span></a>
    

Answer 1

让元素成为inline-block，就不会受到下划线的影响:

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

<a href="#">A link <span id="myspan">some additional information</span></a>

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. ^ref

---

要删除文本和跨度之间的小空间，您可以去掉空白并使用小边距:

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
  margin-left:4px;
}


a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

<a href="#">A link<span id="myspan">some additional information</span></a>