Search code examples
htmlcss

CSS After Element to insert mailto link?

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

html

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

css

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

  • 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/ ​