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

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

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

http://jsfiddle.net/Cb2ry/

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

Answer 2

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

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

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

Answer 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/

Answer 4

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

我没有使用css插入链接，而是将其编码为带有href＆amp;的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），直到它有内容。

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

Answer 5

您无法将html添加到css中的content。除非你逃避一切。

http://jsfiddle.net/PDTng/

或者，您可以使用jQuery并使用.html（），例如：

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

CSS After Element插入mailto链接？

5 个答案: