如何避免 a 标签的 text-decoration 属性影响该节点下的其他标签

html 代码：

​helloworld​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

我希望指针移到链接上的时候，只有 hello 具备下划线，于是这么写 CSS：

​a { text-decoration: none; }
a:hover { text-decoration: underline; }

a span { color: red; }
a:hover span { color: green; text-decoration: none; }

但是，运行的结果并没有预想的那样，运行的结果显示 span 可以拥有自己的 color 属性，但 text-decoration 却从 a 那儿继承了，导致 span 标签也同时出现了下划线，这该如何解释？