Удаление подчеркивания частично из ссылки

Question

В моем нижнем колонтитуле есть следующее «окно ссылки»:

Это 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

Самым чистым вариантом будет использование пользовательского класса для этой ссылки

.headerLink {text-decoration:none;}

А затем другой класс для частей, которые должны быть подчеркнуты:

.headerLinkAction {text-decoration: underline;}

Возможно, вы захотитетакже обновите класс наведения.

Answer 2

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>

Answer 3

Вы можете снять подчеркивание с тега привязки, а затем использовать подчеркивание для тех частей слова, как это,

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