从 link 中删除部分下划线

Question

我的页脚中有以下 'link-box'：

这是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>

我想要正文的第一部分，“ - ”/“-”到不加下划线，像这样：

我认为 text-decoration-skip: spaces; 是完成此操作的最简单方法，但是，几乎没有浏览器支持它（目前）。

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

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

Answer 1

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

<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>

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

Answer 2

最干净的选择是为此 link

使用自定义 class

.headerLink {text-decoration:none;}

然后另一个 class 用于应加下划线的部分：

.headerLinkAction {text-decoration: underline;}

您可能还想更新悬停 class。

Answer 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>

从 link 中删除部分下划线

Removing underline partially from a link

html

css

text-decorations