CSS After元素如何插入mailto链接？

Question

我想要显示一个mailto链接。是否可以使用CSS来实现？

html

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

CSS

.footer_column .fe:after {content:"<a href="mailto:[e-mail]">[e-mail]</a>"; }

- Tom

Answer 1

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

你必须记住，CSS仅用于样式目的。这包括::before和::after选择器。

你最好使用JavaScript替代方案。

- etoxin

Answer 2

使用伪元素添加的内容不会出现在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/

- TimPetricola

---

我正在尝试阻止垃圾机器人读取它。如果可能的话，尽量避免使用JavaScript。 - Tom

我明白，但我认为仅通过CSS或HTML阻止mailto垃圾邮件的替代方案不存在。如果您最终决定要使用它，我已经在我的帖子中添加了一些JavaScript代码。 - TimPetricola

现在许多机器人都可以处理JavaScript，因此像这样混淆它仍然只会减少垃圾邮件而不是防止它。 （一旦它出现在一个垃圾邮件发送者的列表上，它最终会出现在更多列表中，因为他们分享/出售它们。）完全防止机器人能够读取电子邮件地址的唯一方法是将其呈现为文本（请通过myname at company dot com给我发电子邮件），或添加用户需要删除的垃圾字符，这两种方法都会阻止单击发送电子邮件的便利性。如果有条件的话，保持电子邮件地址仅在服务器端代码中的联系我们表格可能更好。 - Jay Irvine

Answer 3

您的值没有显示出来，因为引号需要转义或更改：

.fe:after {content:"<a href='mailto:[e-mail]'>[e-mail]</a>"; }​

即使这样，您的内容也只会显示为静态文本，而不是渲染后的效果。

http://jsfiddle.net/Cb2ry/

- Curtis

Answer 4

这对于一些人可能会有用...

与其使用 CSS 插入链接，我将其编码为 HTML 标记，并留空。像这样:

<p>This text is always here.</p>
<a class="mobile" href="mailto:[e-mail]"></a>

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

那样链接就不会出现（高度：0，宽度：0），直到它有内容为止。

我在响应式店铺定位器中使用它，在小屏幕尺寸下地图叠放在位置列表之上，需要一个链接到列表锚点。我认为这是一种“设计”决策，这是唯一合理的做法。

- Theo

---

好主意！不太适合维护渐进增强，但真的很有创意。 - user241244

Answer 5

在CSS中你不能向content添加HTML代码, 除非你转义一切内容。

http://jsfiddle.net/PDTng/

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

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

- Deadlykipper

---

这个方法似乎会在屏幕上打印电子邮件地址？那对于垃圾邮件机器人来说并没有帮助，是吗？还是jQuery使它无法被机器人读取？谢谢！ - Tom