CSS After Element to insert mailto link?

Question

I\'m attempting to display a mailto link. Is that possible with CSS?

html

<         


        

Answer 1

You can't add html to the content in css. Unless you escape everything.

http://jsfiddle.net/PDTng/

Alternatively, you could use jQuery and use .html(), eg:

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

Answer 2

you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.

You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.

Your best option is to use a JavaScript alternative.

Answer 3

Your value wasn't appearing because the speech marks needed escaping, or changing:

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

http://jsfiddle.net/Cb2ry/

Even then though, your content will just display as static text, rather than rendered.

Answer 4

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.

If the goal is to block spam, I usually use this piece of 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/ ​

Answer 5

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:

<p>This text is always here.</p>
<a class="mobile" href="mailto:info@site.com"></a>

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

That way the link doesn't appear (height:0, width:0) until it has content.

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.