CSS After Element插入mailto链接？答案

【问题标题】：CSS After Element to insert mailto link?CSS After Element插入mailto链接？
【发布时间】：2014-05-30 03:00:27
【问题描述】：

我正在尝试显示 mailto 链接。用 CSS 可以吗？

html

<li class="fe footer_no_link"></li>

css

.footer_column .fe:after {content:"<a href="mailto:info@site.com">info@site.com</a>"; }

【问题讨论】：

标签： html css

【解决方案1】：

您不能使用 CSS3 ::after 或 ::before 选择器添加 html 元素。 content:"" 属性只接受纯文本。

您必须记住，CSS 仅用于样式设置。这包括 ::before 和 ::after 选择器。

您最好的选择是使用 JavaScript 替代方案。

【讨论】：

【解决方案2】：

您的值没有出现，因为语音标记需要转义或更改：

.fe:after {content:"<a href='mailto:info@site.com'>info@site.com</a>"; }

http://jsfiddle.net/Cb2ry/

即便如此，您的内容也只会显示为静态文本，而不是呈现。

【讨论】：

【解决方案3】：

使用伪元素添加的内容不会出现在 DOM 中，所以你不能。但是你为什么要用 CSS 来做呢？它不是样式，正确的位置似乎直接在 HTML 文件上。

如果目标是阻止垃圾邮件，我通常使用这段 javascript：

var m; 
m='in';
m+='f';
m+='o@exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;

邮件被拆分以确保它不会在任何文件中显示为电子邮件。

你可以在这里看到结果：http://jsfiddle.net/tzkDt/

【讨论】：

我正在尝试阻止垃圾邮件机器人读取它。如果可能，尽量避免使用 javascript
我明白了，但我认为不存在仅使用 css 或 html 来阻止 mailto 上的垃圾邮件的替代方案。如果您最终决定可以使用它，我会使用一些 javascript 编辑我的帖子。
现在很多机器人都会处理 javascript，所以像这样隐藏它仍然只会减少垃圾邮件，而不是阻止它。（一旦它在一个垃圾邮件发送者的名单上，它最终会变得更多，因为他们分享/出售它们。）完全防止机器人能够读取电子邮件地址的唯一方法是将其呈现为文本（以我的名字给我发电子邮件company dot com) 或添加用户需要删除的垃圾字符，这两者都妨碍了一键发送电子邮件的便利性。如果可以的话，将电子邮件地址单独保存在服务器端代码中的联系我们表格可能会更好。

【解决方案4】：

这可能对某人有用...

我没有使用 css 插入链接，而是使用 href & 类将其编码到 html 中，但将其留空。像这样：

<p>This text is always here.</p>
<a class="mobile" href="mailto:info@site.com"></a>

.mobile:after {
     content:'Click here to email us.'
}

这样链接在有内容之前不会出现（高度：0，宽度：0）。

我将它用于响应式商店定位器，其中地图以小屏幕尺寸堆叠在位置列表的顶部，因此需要指向列表锚点的链接。我认为这是一个“设计”决定，这是这样做的唯一正当理由。

【讨论】：

好主意！不适合保持渐进增强，但非常有创意。

【解决方案5】：

您不能在 css 中将 html 添加到 content。除非你逃避一切。

http://jsfiddle.net/PDTng/

或者，您可以使用 jQuery 并使用 .html()，例如：

http://jsfiddle.net/PDTng/1/

【讨论】：

这个方法好像是在屏幕上打印电子邮件地址？这对垃圾邮件机器人没有帮助吗？还是 jQuery 让它无法被机器人读取？谢谢！