html - 从链接中部分删除下划线

标签 html css text-decorations

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

enter image description here

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

我希望文本的第一部分“ - ”/“-有下划线,比如这个:

enter image description here

我认为text-decoration-skip: spaces;将是实现此目的的最简单方法,但是,几乎没有浏览器支持它(目前)。

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

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

最佳答案

最干净的选择是为此链接使用自定义类

.headerLink {text-decoration:none;}

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

.headerLinkAction {text-decoration: underline;}

您可能还想更新悬停类。

关于html - 从链接中部分删除下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54612985/

相关文章:

html - 如何扩展 HTML5 视频以触摸左/右边缘?

javascript - 将数据填充到我所有的跨度中

css - 如何为同一页面中的同一组件提供两种不同的样式?

asp.net - 如何在页脚后的页面底部放置黑色

ssrs-2008 - 更改ssrs报告中下划线的颜色

wpf - 单击按钮时向 ListView 中的选定行添加删除线

text-decorations - 从链接中删除文本装饰

javascript - 如何使用 Javascript 使用 Chrome for Android 播放声音通知?

html - 下拉 react 不适用于 Bootstrap v4

javascript - 修复头部时 Bootstrap 滚动表中断