从链接中部分删除下划线答案

【问题标题】：Removing underline partially from a link从链接中部分删除下划线
【发布时间】：2019-02-10 03:10:38
【问题描述】：

我的页脚中有以下“链接框”：

这是HTML：

<div id="link-box" style="height: 80px; width: 335px;">
    <a href="index.html">
        <img src="Logo.png" style="height: 80px;">
        <h1>&nbsp;-&nbsp;<spawn class="red">Zegmaar</spawn><spawn class="blue">Bas</spawn>.nl</h1>
    </a>
</div>

我希望将文本的第一部分“&nbsp;-&nbsp;”/“-”不加下划线，如下所示：

我认为text-decoration-skip: spaces; 将是实现这一点的最简单方法，但是，几乎没有浏览器支持它（目前）。

我怎样才能得到想要的结果？

您的解决方案越简单优雅越好。我只想使用 CSS 和 HTML。

【问题讨论】：

标签： html css text-decorations

【解决方案1】：

最简洁的选择是为此链接使用自定义类

.headerLink {text-decoration:none;}

然后是下划线部分的另一个类：

.headerLinkAction {text-decoration: underline;}

您可能还想更新悬停类。

【讨论】：

【解决方案2】：

你可以去掉锚标记的下划线，然后像这样在单词的那些部分使用下划线，

<div id="link-box" style="height: 80px; width: 335px;">
<a href="index.html" style="text-decoration:none;">
 <h1>&nbsp;-&nbsp;<spawn class="red">Zegmaar</spawn><spawn class="blue" style="text- 
 decoration: underline;">Bas</spawn>.nl</h1>
 </a>
 </div>

如果您只想在悬停时显示下划线，请使用带有text-decoration:none; 的悬停类。

【讨论】：

这样做会使下划线与文本颜色相同，而我希望它们为白色，与“.nl”颜色相同。就像他们在我提供的屏幕截图中一样。
然后还要加上 text-decoration-color:white;这将显示白色下划线。

【解决方案3】：

Try this:
( Removed underline )

    <div id="link-box" style="height: 80px; width: 335px;">
        <img src="Logo.png" style="height: 80px;">
        <h1>&nbsp;-&nbsp;<a href="index.html"><spawn class="red">Zegmaar</spawn><spawn class="blue">Bas</spawn>.nl</a></h1>
    </div>

【讨论】：

这不起作用，因为现在图像、“ - ”和文本上方和下方的空格将不再是链接。
在新的