CSS After Element插入mailto链接？

Question

我正在尝试显示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>"; }

Answer 1

你不能用CSS3 ::after或::before选择器添加html元素.该content:""属性将只接受纯文本.

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

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

Answer 2

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

\n\n

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

\n\n

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

\n\n

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

\n\n

您可以在这里看到结果：http://jsfiddle.net/tzkDt/ \n\xe2\x80\x8b

\n