Outlook 电子邮件签名和超链接线颜色答案

【问题标题】：Outlook Email Signature and hyperlink line colorOutlook 电子邮件签名和超链接线颜色
【发布时间】：2020-02-13 06:21:40
【问题描述】：

有没有人可以在桌面和移动设备上更改超链接线的颜色（从蓝色开始）？

CSS 和 Html 样式无法阻止蓝线出现，尽管我们已经能够在桌面上完全删除蓝线。手机似乎对此有一个覆盖。

我的客户希望超链接线是品牌颜色，而文本保持黑色。

谢谢！

【问题讨论】：

标签： html css email outlook responsive

【解决方案1】：

将链接制作成按钮，这里是一个例子，只需将链接粘贴到 Html 中并编辑 CSS 颜色即可。

.color-link {
  margin: 5px;
  border-radius: 20px;
  border: 0;
  color: #fff;
  padding: 10px 15px;
  font-size: 16px;
  background-color: #00adb5
}

&lt;button class= "color-link" onclick="window.location.href = 'https://www.google.com/search';"&gt;Link Text&lt;/button&gt;

【讨论】：

这是一个有趣的想法，但按钮显然不被 Outlook 或手机接受。我在 HTML 中正确地制作了它，电子邮件和电话只是将它翻译成一个简单的超链接（带有蓝色下划线的蓝色文本。

【解决方案2】：

一些 CSS 文件在不同的屏幕媒体宽度上使用自定义 CSS。也许你也应该在不同的媒体上覆盖它？尝试搜索或添加类似：

@media only screen and (max-width: 600px) {
    a {
     color: red;
     text-decoration: none;
    }
}

【讨论】：

刚试过...不幸的是手机仍然将下划线变为蓝色。
我已经修改了上面的代码。也许它会起作用。这是screenshot

【解决方案3】：

好的，我找到了您要查找的内容，只需更改以下代码中的颜色即可。下划线高度设置为 3px，但您可以将其更改为您想要的任何颜色，请确保更改所有颜色，因为当访问链接时，默认情况下它会变为紫色。

a {
text-decoration: none;
}
a:link {
color: #222831;
border-bottom: 3px solid #00adb5;
}
a:visited {
color: Purple;
border-bottom: 3px solid purple;
}
a:hover {
color: black;
border-bottom: 3px solid #222831;
}

&lt;a href="www.enter/url.com"&gt;Link Text&lt;/a&gt;

【讨论】：

嗨。不幸的是，这不起作用。问题似乎是 Outlook（和移动设备）覆盖了很多 css 编码 - 上面应该可以工作。