Question

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

我目前相关的Jekyll default.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

解决方案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; }

Answer 2

对于白色和白色，50％不透明度强调使用：

＆＃13;

p {
  background-color: #666;
  padding: 100px;
}

a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0);
}

a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

＆＃13;

<p>
  <a href="#">example</a>
</p>

＆＃13;

来自W3Schools的代码示例here
来自W3C here

的更多信息

Answer 3

您可以使用text-decoration并使用rgba为现有颜色添加不透明度。在这里，我只是放弃了蓝色的不透明度。

＆＃13;

a {
  text-decoration-color: rgba(0, 0, 255, 0.2);
}

＆＃13;

<a href="#">Hello, World!</a>

＆＃13;

Answer 4

现在有更好的方法使用 CSS 变量

a {
 --color1: 251, 0, 0;
  
  color: rgba(var(--color1), 1);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color1), .33);
}

见pen

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

4 个答案: