CSS 在元素后插入 mailto 链接？

Question

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

html

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

css

Answer 1

您无法使用 CSS3

::after

或

::before

选择器添加 html 元素。

content:""

属性仅接受纯文本。

您必须记住，CSS 仅用于样式目的。这包括

::before

和

::after

选择器。

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

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/

Answer 3

这可能对某人有用......

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

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

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

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

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

Answer 4

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

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

http://jsfiddle.net/Cb2ry/

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

Answer 5

你不能将html添加到css中的

content

中。除非你逃避一切。

http://jsfiddle.net/PDTng/

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

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