减少 HTML 中锚属性下划线的不透明度答案

【问题标题】：Reduce opacity of anchor attribute underline in HTML减少 HTML 中锚属性下划线的不透明度
【发布时间】：2018-04-08 17:16:47
【问题描述】：

他们是否仍然在 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;
}

【问题讨论】：

不要依赖下划线，而是使用具有降低不透明度的底部边框的伪元素或 alpha 小于 1 的 RGBA 值。
@Terry 我对 CSS 或 SASS 没有信心，所以我不明白你所说的伪元素是什么意思。你能给我一个我可以使用的 SASS 的例子吗？

标签： html css sass jekyll

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

【讨论】：

虽然使用 text-decoration 属性会永久添加下划线，但 rgba 更改工作！谢谢:)

【解决方案2】：

对于白色和白色，使用 50% 不透明度下划线：

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);
}

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

来自 W3Schools 的代码示例here
来自 W3C 的更多信息here

【讨论】：

我刚刚尝试过，现在下划线始终显示，即使您没有将鼠标悬停在超链接文本上。即使.project-name a:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); } 也不起作用
尝试将text-decoration: none添加到.project-name a:link
基本上您需要在常规锚点上声明下划线，但在 rgba 中以 0% 的不透明度将其完全隐藏并在悬停时更改颜色
现在使用.project-name a { color: white; } .project-name a:hover { text-decoration-color: rgba(255, 255, 255, 0.4); } 对我来说效果很好！干杯，不过

【解决方案3】：

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

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

&lt;a href="#"&gt;Hello, World!&lt;/a&gt;

【讨论】：

【解决方案4】：

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

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

见pen

【讨论】：