降低 HTML 中锚点属性下划线的不透明度

Question

他们是否无论如何都在 HTML 类上使用 CSS 属性来减少标签上默认下划线（不是文本，只是下划线）的不透明度/可见性<a>？

我目前的相关 Jekylldefault.html和style.scss目前看起来像这样：

<h1 class="project-name"><a href="https://itspugle.ga">{{ site.title | default: site.github.repository_name }}</a></h1>`

和

---
---

@import 'jekyll-theme-cayman';
.project-name a {
    color: white;
}

Answer 1

解决方案一：

您可以使用 css text-decoration-color属性。

例子：

.project-name a {
   text-decoration: underline;
   -webkit-text-decoration-color: rgba(255, 0, 0, 0.4); /* Safari */   
   text-decoration-color: rgba(255, 0, 0, 0.4);
}

解决方案2：

如果您想要更多控制，只需消除默认下划线并使用边框来控制颜色和不透明度。这样做的好处是您可以为链接文本和下划线应用不同的颜色。

例子：

.project-name a {
   text-decoration: none;
   border-bottom: 1px solid rgba(255, 0, 0, 0.4);
   display: inline-block;
}