仅在移动设备上使用 CSS3 的电子邮件中的超链接答案

【问题标题】：Hyperlink in email on mobile only with CSS3仅在移动设备上使用 CSS3 的电子邮件中的超链接
【发布时间】：2013-10-21 15:00:17
【问题描述】：

我希望在 HTML 电子邮件中添加超链接，但只能通过 CSS3 在移动设备上添加。是否有任何 CSS3 属性可以做到这一点？

【问题讨论】：

不，没有：CSS影响，影响，only表示，它不能改变HTML标记，或提供功能。
事实上，您可以通过 CSS3 更改移动电子邮件中的许多标记。例如在 CSS3 属性之前和之后添加/删除移动设备上的副本等等。我不确定是谁投了反对票，这让我很生气。
不，你不能：::before 和 ::after 伪元素不在标记中，它们在 DOM 中不可用。使用 CSS 将文本转换为链接是不可能的（CSS 不能直接针对特定文本（::first-letter、::first-line 伪元素除外），除非该文本被包装在某种标签中）。移动设备可以显示/隐藏链接（例如，使用媒体查询），但它无法创建它们。
@DiNovici 从您对我的评论中您知道，Gmail 不会尊重您之前/之后的 CSS。 HTML 电子邮件几乎不懂 CSS，更不用说 CSS3。

标签： css hyperlink html-email

【解决方案1】：

这无法通过 CSS 实现。

你有几个选择：

类似<span class="mobile"><a href="the link">The link</a></span><span class="desktop">No link</span> 加上@media 查询来显示/隐藏不同设备尺寸上的两个跨度。
通过@media 查询在桌面上设置链接样式，使其看起来像普通文本（即color: #000; cursor: default; text-decoration: none;）

【讨论】：

谢谢，但这是一封电子邮件，我忘了指明。 Gmail 正在剥离所有头部样式，更糟糕的是，它也不适用于 display:none。
据我所知，在 Gmail 中没有任何东西可以解决问题。 Gmail 缺少多种 CSS 选项。 campaignmonitor.com/css

【解决方案2】：

ceejayoz 非常接近。你只需要稍微扭转一下你的想法。

如果您只是将超链接放在移动/较小的屏幕上，则可以使用内联 css 和 <head> 中的 @media 查询轻松完成。（注意。我建议通过电子邮件服务提供商发送电子邮件，以确保您的@media 查询保持不变。）

这是我会采取的方法。

CSS

@media only screen and (max-width: 480px){
    a[class="link"] {
        font-size: 12px !important;
        color: #000001 !important;
        text-decoration: underline !important;
    }
}

HTML

<a class="link" href="http://yourlink.com" style="font-size: 1px; color: #ffffff; text-decoration: none;">yourlink.com</a>

我还应该提到，并非所有移动电子邮件客户端都能正确识别@media 查询。例如，在开发响应式 HTML 电子邮件时，Android 上的 Gmail 就不能很好地工作。

【讨论】：

感谢 Darryl，但这会在桌面上的白色文本处留下空间。我最终所做的是为两者添加链接，但将桌面上的链接文本设为黑色并删除下划线，使其看起来像普通文本，而在移动设备上则是链接。
啊……我明白了。我没有意识到桌面和移动设备上都有文本，只有移动设备上的链接。使用内联 css 将其设置为像常规文本一样的样式是一个合理的解决方案。尝试添加光标样式以保护您的桌面客户端不再看到该链接。