Html CSS After Element插入mailto链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9704802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS After Element to insert mailto link?
提问by Tom
I'm attempting to display a mailto link. Is that possible with CSS?
我正在尝试显示一个 mailto 链接。用CSS可以吗？
html
html
<li class="fe footer_no_link"></li>
css
css
.footer_column .fe:after {content:"<a href="mailto:[email protected]">[email protected]</a>"; }
采纳答案by TimPetricola
Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
添加了伪元素的内容不会出现在 DOM 中，所以不，你不能。但是你为什么要用 CSS 来做呢？它不是样式，正确的位置似乎直接在 HTML 文件上。
If the goal is to block spam, I usually use this piece of javascript:
如果目标是阻止垃圾邮件，我通常会使用这段 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;
The mail is splitted to be sure that it doesn't appear as an email in any file.
邮件被拆分以确保它不会在任何文件中显示为电子邮件。
You can see the result here: http://jsfiddle.net/tzkDt/?
你可以在这里看到结果：http: //jsfiddle.net/tzkDt/？
回答by etoxin
you cannot add html elements with the CSS3 ::afteror ::beforeselectors. The content:""property will only accept plain text.
您不能使用 CSS3::after或::before选择器添加 html 元素。该content:""属性仅接受纯文本。
You must remember that CSS is for styling purposes only. This includes the ::beforeand ::afterselectors.
您必须记住，CSS 仅用于样式目的。这包括::before和::after选择器。
Your best option is to use a JavaScript alternative.
您最好的选择是使用 JavaScript 替代方案。
回答by Curt
Your value wasn't appearing because the speech marks needed escaping, or changing:
您的值没有出现，因为语音标记需要转义或更改：
.fe:after {content:"<a href='mailto:[email protected]'>[email protected]</a>"; }?
Even then though, your content will just display as static text, rather than rendered.
即使这样，您的内容也只会显示为静态文本，而不是呈现。
回答by Theo
This might be useful to someone...
这可能对某人有用...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
我没有插入带有 css 的链接，而是使用 href & 类将其编码到 html 中，但将其留空。像这样：
<p>This text is always here.</p>
<a class="mobile" href="mailto:[email protected]"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
这样链接在有内容之前不会出现（高度：0，宽度：0）。
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
我将它用于响应式商店定位器，其中地图以小屏幕尺寸堆叠在位置列表的顶部，需要链接到列表锚点。我认为这是一个“设计”决定，这是唯一合理的理由。
回答by Deadlykipper
You can't add html to the contentin css. Unless you escape everything.
您不能将 html 添加到contentin css 中。除非你逃避一切。
Alternatively, you could use jQuery and use .html(), eg:
或者，您可以使用 jQuery 并使用 .html()，例如：
